@{
　　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. 大数据架构：搭建CDH5.5.1分布式集群环境

    yum install -y ntp gcc make lrzsz wget vim sysstat.x86_64 xinetd screen expect rsync bind-utils ioto ...

  2. java模式：建造者模式

    我发现很多源码很喜欢用这个模式,比如spring cloud,spring framework. 建造者模式(Builder)用以构建各种各样的对象,主要功能就是代替对象的构造函数,更加自由化. 举个 ...

  3. elasticsearch 二、elasticsearch-head安装

    简介 elastricsearch-head是用于elasticsearch群集浏览和交互的插件. 源码:https://github.com/mobz/elasticsearch-head (上图来 ...

  4. 关于C/C++中求最大公约数和最小公倍数的算法

    1.更相减损法 int gcd(int a,int b) { while(a!=b) { if(a>b) a-=b; else b-=a; } return a; } 2.辗转相除法--递归 i ...

  5. Linux操作环境下配置MMIX环境

    一.概述 MMIX用途:高德纳写的<计算机程序设计艺术>,使用 MMIXAL 来编写代码,解释算法. 环境:Ubuntu 桌面版18.04. 二.操作步骤 1,创建MMIX文件夹并切入该文 ...

  6. dedecms调用子栏目及文章列表

    使用DEDECMS程序建网站时,有些栏目下面有子栏目,我们需要在网站前台调用出子栏目以及子栏目下的文章列表. dedecms调用子栏目及文章列表可以使用以下的代码进行调用: <div class ...

  7. 使用 Sublime Text 将含下划线的字符串批量替换为驼峰命名法格式的字符串

    本文版权归cxun所有,如有转载请注明出处与本文链接,谢谢!原文地址:http://www.cnblogs.com/cxun/p/7762984.html For indexing: Convert ...

  8. 读《javascript语法精粹》知识点总结

    昨天泡了大半天的读书馆,一口气看完了<javascript语法精粹>这本书,总体来说这本书还是写的不错,难怪那么多的推荐.<javascript语法精粹>主要是归纳与总结了ja ...

  9. E - Heavy Transportation

    来源poj1797 Background Hugo Heavy is happy. After the breakdown of the Cargolifter project he can now ...

  10. php框架中，try，catch不能用的问题(转载)

    本文转自:http://blog.csdn.net/sangjinchao/article/details/71436557 最近再用laravel框架发现,try catch用了没有效果,依然不能阻 ...