@{
　　Layout = null;
}

<!DOCTYPE html>

<html>
<head>
　　<meta name="viewport" content="width=device-width" />
　　<title>CheckBoxSelect</title>
</head>
<body>
　　<div>
　　　　<table>
　　　　　　<tr style="text-align:center">
　　　　　　　　<td colspan="10">全选：<input type="checkbox" name="SelectAll" id="cb_select_all" style="width:50px;height:50px" /></td>
　　　　　　</tr>
　　　　　　<tr>
　　　　　　　　<td>1：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_1" onclick="SingleSelect('1')" /></td>
　　　　　　　　<td>2：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_2" onclick="SingleSelect('2')" /></td>
　　　　　　　　<td>3：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_3" onclick="SingleSelect('3')" /></td>
　　　　　　　　<td>4：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_4" onclick="SingleSelect('4')" /></td>
　　　　　　　　<td>5：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_5" onclick="SingleSelect('5')" /></td>
　　　　　　　　<td>6：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_6" onclick="SingleSelect('6')" /></td>
　　　　　　　　<td>7：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_7" onclick="SingleSelect('7')" /></td>
　　　　　　　　<td>8：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_8" onclick="SingleSelect('8')" /></td>
　　　　　　　　<td>9：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_9" onclick="SingleSelect('9')" /></td>
　　　　　　　　<td>10：<input type="checkbox" name="cbCheckBox" style="width:50px;height:50px" id="cb_10" onclick="SingleSelect('10')" /></td>
　　　　　　</tr>
　　　　</table>
　　</div>
</body>
</html>
<script src="~/Scripts/jquery-2.1.1.min.js"></script>
<script>
　　$(function () {
　　　　$('#cb_select_all').click(function () {
　　　　　　if ($('input[name="SelectAll"]').is(':checked')) {
　　　　　　　　$('input[name="cbCheckBox"]').prop('checked', true);//全选
　　　　　　}
　　　　　　else {
　　　　　　　　$('input[name="cbCheckBox"]').prop('checked', false);//取消全选
　　　　　　}
　　　　　});
　　　　});
　　//点击单个复选框时，全选的复选框要发生相应的变化
　　function SingleSelect(id) {
　　　　if ($('#cb_' + id).is(':checked') == false) {
　　　　　　$('#cb_select_all').prop('checked', false);//如果全部选中的子复选框有一个没选中了，则将全选复选框的状态变为未选中
　　　　}
　　　　else {
　　　　　　var checkboxLength = $('input[name="cbCheckBox"]').length;//全部子复选框的个数
　　　　　　var checkedBoxLength = $('input[name="cbCheckBox"]:checked').length;//子复选框选中的个数
　　　　　　if (checkboxLength == checkedBoxLength) {
　　　　　　　　//点击多个子复选框，当选中的复选框个数等于所有子复选框的个数，则要将全选复选框的转态变为选中
　　　　　　　　$('#cb_select_all').prop('checked', true);
　　　　　　　}
　　　　}
/*-------------注意-------------*/
/*
做这个时，一开始死活弄不出来，各种不满意，弄好久了，经过多方排查和找资料，终于解决了问题，总结了下，问题出现在两点：
1、传入的参数id要这种形式：$('#cb_' + id)，我一开始传入的参数是这个CheckBox的id，然后是：$(id).is(':checked'),
　　看上去没错，但实际是该判断永远返回false，浪费了不少时间
2、问题出现在这里：$('#cb_select_all').attr('checked', false);但结果是该checkbox的状态始终是false,不管怎么弄都不行，
　　我记得以前是可以这样的，不知道是不是因为新版jQuery的原因.后面百度看到有用prop这个属性，我就试了一下，完美解决问题！
　　这段代码比我以前写的简洁多了（感悟的废话倒是多了点，哈哈），以后看下能不能提炼出更简洁的，若有人能写出更简洁的，希望不吝赐教啊！
*/
/*-------------获取选中值-------------*/

　　//$('input[name="cbCheckBox"]:checked').each(function(){
　　　　// var checkedVal=$(this).val();
　　//});
　　}
</script>

代码截图：

效果截图：

全选：

全不选：

当为全选状态时，若有单个不选，全选复选框也要变为未选中状态：

当一个个选中子复选框，直至把全部都选中时，全选的复选框也要变为选中状态：

jquery对复选框(checkbox)的操作（精华）的更多相关文章

  1. Jquery对复选框CheckBox的操作

    checkbox: 多选框 //获取选中值  checkbox:$("#checkbox_id").attr("value"): 多选框checkbox,打勾: ...

  2. jquery判断复选框checkbox是否被选中

    jquery判断复选框checkbox是否被选中 使用is方法 //如果选中返回true //如果未选中返回false .is(':checked');

  3. jQuery判断复选框checkbox的选中状态

    通过jQuery设置复选框为选中状态 复选框 <input type="checkbox"/> 错误代码: $("input").attr(&quo ...

  4. jquery获取复选框checkbox的值

    jQuery API : each(callback) :以每一个匹配的元素作为上下文来执行一个函数. :checked :匹配所有选中的被选中元素(复选框.单选框等,不包括select中的optio ...

  5. 不同版本的jquery的复选框checkbox的相关问题

    在尝试写复选框时候遇到一个问题,调试了很久都没调试出来,极其郁闷: IE10,Chrome,FF中,对于选中状态,第一次$('#checkbox').attr('checked',true)可以实现 ...

  6. [jQuery] 判断复选框checkbox是否选中checked

    返回值是true/false method 1: $("#register").click(function(){ if($("#accept").get(0) ...

  7. jQuery操作复选框checkbox技巧总结 ---- 设置选中、取消选中、获取被选中的值、判断是否选中等

    转载:https://blog.csdn.net/chenchunlin526/article/details/77448168 jQuery操作复选框checkbox技巧总结 --- 设置选中.取消 ...

  8. jquery操作复选框(checkbox)十二技巧

    jquery操作复选框(checkbox)的12个小技巧. 1.获取单个checkbox选中项(三种写法)$("input:checkbox:checked").val()或者$( ...

  9. Jquery操作复选框(CheckBox)的取值赋值实现代码

    赋值 复选框 CheckBox 遍历 取值  1. 获取单个checkbox选中项(三种写法): $("input:checkbox:checked").val() 或者 $(&q ...

随机推荐

  1. Spark基本架构及原理

    Hadoop 和 Spark 的关系 Spark 运算比 Hadoop 的 MapReduce 框架快的原因是因为 Hadoop 在一次 MapReduce 运算之后,会将数据的运算结果从内存写入到磁 ...

  2. js学习（六）- js对象创建

    //---------------------js文件--------------------- var namespace02=new Object(); namespace02.Person=fu ...

  3. 从unity丢图标到unity进不去桌面

    现象1: 用了一年多的unity的右上角的网络图标和网易云音乐的图标消失不见了,我也不记得最近有update或upgrade过,然而这两个功能还是可以正常用 解决1: 安装Gnome,果然相应的图标就 ...

  4. 【CF613D】Kingdom and its Cities 虚树+树形DP

    [CF613D]Kingdom and its Cities 题意:给你一棵树,每次询问给出k个关键点,问做多干掉多少个非关键点才能使得所有关键点两两不连通. $n,\sum k\le 10^5$ 题 ...

  5. hdu 1241(DFS/BFS)

    Oil Deposits Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tota ...

  6. js各种获取当前窗口页面宽度、高度的方法

    alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(docum ...

  7. 11.vue 数据交互

    vue new Vue({ el,选择器 string/obj 不能选择html/body data, methods, template string/obj //生命周期 -- 虚拟DOM 1.初 ...

  8. elk-图形化展示（八）

    可以根据自己定义: pv: uv: ip top 10 ua tope 10 url top 5 status  top 10 仪表板展示:

  9. python_str 字符串的所有方法

    # _Author:huang# date: 2017/11/28 # 字符串 '''print("hello" * 3)print("hello world" ...

  10. css学习_css浮动

    1.文档流介绍 网页布局的核心就是利用css来摆放盒子, 把盒子摆放在合适的位置. css的定位机制有以下3种(网页布局一般需要3种搭配使用): a.普通流(标准流) b.浮动 1.浮动只有左右. 2 ...