<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script>
/* 第一种方法
function selectAll() {

if ($("#select-all").is(":checked")) {

$("[name='selected']").prop("checked", true);
} else {

$("[name='selected']").prop("checked", false);
}

} */

/*
*
第二种方法
*/
function selectAll() {

if ($("#select-all").is(":checked")) {//判断一个checkbox多选框是否选中

$("input:checkbox[name='selected']").prop("checked", "checked");

var allValue = queryCheckedValue();
alert(allValue);

} else {

$("input:checkbox[name='selected']").prop("checked", "");
var str = noCheckedValue();
alert(str);

}

}

//获取所有选中checkbox的值

function queryCheckedValue() {

var str = "";

$("input:checkbox[name='selected']:checked").each(function(i) {

var val = $(this).val();
str = str + val + "-";

});

return str;

}

//所有的name为‘selected’的checkbox的值
function noCheckedValue() {

var str = "";
$("input:checkbox[name='selected']").each(function(i) {

var val = $(this).val();
str = str + "-" + val;
});
return str;
}

//判断所有的子checkbox全部选中时，总checkbox选中，否则，反之；
function oneToAll() {

var allChecked = 0;//所有选中checkbox的数量

var all = 0;//所有checkbox的数量

$("input:checkbox[name='selected']").each(function(i) {
all++;
if ($(this).is(":checked")) {
allChecked++;
}

});

if(allChecked==all){//相等时，则所有的checkbox都选中了，否则，反之；

$("#select-all").prop("checked",true);

}else{

$("#select-all").prop("checked",false);

}

}
</script>
</head>
<body>

<table>

<tr>
<td><input type="checkbox" id="select-all"
onclick="selectAll();" /></td>
<td>全选的checkbox</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="1" onclick="oneToAll();"/></td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="2" onclick="oneToAll();"/></td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="3" onclick="oneToAll();"/></td>
<td>3</td>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="4" onclick="oneToAll();"/></td>
<td>4</td>
</tr>
</tr>
<tr>
<td><input type="checkbox" name="selected" value="5" onclick="oneToAll();"/></td>
<td>5</td>
</tr>
</table>

</body>
</html>

checkbox的选中、全选、返选、获取所有选中的值、所有的值、单选全部时父选中的更多相关文章

  1. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  2. jquery checkbox 选中 全选 插件

    checkbox  选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...

  3. 2016/3/30 租房子 ①建立租房子的增、删、改php页面 ②多条件查询 ③全选时 各部分全选中 任意checkbox不选中 全选checkbox不选中

    字符串的另一种写法:<<<AAAA; 后两个AA回车要求顶格  不然报错 例子: <!DOCTYPE html> <html lang="en" ...

  4. JQuery 全选 反选 获取Table 中指定td的元素值

    //全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...

  5. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  6. jquery 获取一组元素的选中项 - 函数、jquery获取复选框值、jquery获取单选按钮值

    做表单提交时,如果现在还在用form提交,用户体验很差,所以一般使用ajax提交. 其中需要获取每个表单输入元素的值,获取的时候像文本框这些还好说,Jquery提供了 .val() 方法,获取很方便, ...

  7. Jquery 利用单个复选款（checkbox）实现全选、反选

    1 <script type="text/javascript"> $(function(){ //全选 $("#CheckedAll").clic ...

  8. 【jQuery】CheckBox使用attr全选无法正确显示

    今天编写JS脚本时,遇到如下的问题. 下面是源代码: <script src="../Scripts/jquery-2.1.3.js"></script> ...

  9. jquery操作checkbox方法（全选、全不选、至少选择一个、选择值/文本）

    原文:http://blog.csdn.net/u014079773/article/details/52371382 在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值, ...

随机推荐

  1. 从客户端中检测到有潜在危险的 Request.Form或Requst.String的值。

    在ASP中客户端请求服务时会出现"从客户端中检测到有潜在危险的 Request.Form或Requst.QueryString的值.",原因是在web.config配置文件中存在这 ...

  2. Erlang模块gen_server翻译

    gen_server 概要: 通用服务器行为描述: 行为模块实现服务器的客户端-服务器关系.一个通用的服务器进程使用这个模块将实现一组标准的接口功能,包括跟踪和错误报告功能.它也符合OTP进程监控树. ...

  3. DBMS

    数据库中的概念 Catalog(分类) Table(表) Column(列)或者Field(字段) Primary(主键):唯一标识数据行的一列 业务主键:有业务意义的字段做主键 逻辑主键:使用没有任 ...

  4. 文件上传组件FileUpload 以及邮箱搭建JavaMail

     文件上传与下载 1.1 文件上传 案例: 注册表单/保存商品等相关模块! --à 注册选择头像 / 商品图片 (数据库:存储图片路径 / 图片保存到服务器中指定的目录) 文件上传,要点: 前台: 1 ...

  5. ipconfig显示IP地址情况

    1.以太网适配器 Local Area Connection 若电脑是本地连接,则ipv4地址是本机的ip地址,默认网关一般为本机所连接路由器的地址. 2.无线局域网适配器 Wireless Netw ...

  6. 查看 NDK 版本

    打开Android Studio , 打开左上角的菜单, File => Settings...  打开一个弹窗. 然后在 Appearance & Behavior =>Syst ...

  7. Angular 2的12个经典面试问题汇总（文末附带Angular测试）

    Angular作为目前最为流行的前端框架,受到了前端开发者的普遍欢迎.不论是初学Angular的新手,还是有一定Angular开发经验的开发者,了解本文中的12个经典面试问题,都将会是一个深入了解和学 ...

  8. Linux MTD子系统 _从模型分析到Flash驱动模板

    MTD(Memory Technology Device)即常说的Flash等使用存储芯片的存储设备,MTD子系统对应的是块设备驱动框架中的设备驱动层,可以说,MTD就是针对Flash设备设计的标准化 ...

  9. 什么是https

    我们都知道HTTPS能够加密信息,以免敏感信息被第三方获取.所以很多银行网站或电子邮箱等等安全级别较高的服务都会采用HTTPS协议. HTTPS简介 HTTPS其实是有两部分组成:HTTP + SSL ...

  10. Struts(五)之OGNL、contextMap

    一.OGNL 1.1.定义 OGNL是Object-Graph Navigation Language的缩写,它是一个单独的开源项目. Struts2框架使用OGNL作为默认的表达式语言.它是一种功能 ...