@{
　　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. 什么是SPU、SKU、ARPU

    这是一篇存档性笔记,我自己存档一下对这3个词的理解.如果你已经明了了这3个词的意思,请直接忽略之 首先,搞清楚商品与单品的区别.例如,iphone是一个单品,但是在淘宝上当很多商家同时出售这个产品的时 ...

  2. SAP S4HANA1610/Fiori安装过程全记录

    经历各种坑,从硬件到文件,终于安装成功. 有需要安装或使用S4HANA(含Fiori)的同学可以参考. 安装文件分享给大家 链接:http://pan.baidu.com/s/1mi7LfIS 密码: ...

  3. MySQL 5.7.14安装说明，解决服务无法启动

    http://jingyan.baidu.com/article/f54ae2fc0affca1e92b84999.html http://www.myexception.cn/mysql/51431 ...

  4. Adding ASP.NET MVC5 Identity Authentication to an existing project

    Configuring Identity to your existing project is not hard thing. You must install some NuGet package ...

  5. 按位与（&）和按位或（|）

    /** * 按位与 : & * 按位或 : | */ public class Demo { /** * 按位与: 为什么(5 & 9)的值等于1 * 按位或: 为什么(5 | 9)的 ...

  6. Flask学习笔记（3）--路由

    0x01 参数传递 传递参数的语法是: /<参数名>/,然后在视图函数中,也要定义同名的参数. 参数的数据类型: 1.如果没有指定具体的数据类型,那么默认就是使用string 数据类型. ...

  7. Spring Security http标签的use-expressions="true"属性

    如果声明为true,那么在access属性要用hasRole()这样写: <intercept-url pattern="/secure/extreme/**" access ...

  8. git 创建新分支并推送到远程分支

      git branch test git checkout test git push origin test:test git branch --set-upstream-to origin/te ...

  9. Codeforces Round #531 (Div. 3)

    A:瞎猜. #include <bits/stdc++.h> using namespace std; int main(){ ios::sync_with_stdio(false); i ...

  10. oracle数据库字符集查询

    1>数据库服务器字符集 select * from nls_database_parameters,其来源于props$,是表示数据库的字符集. 查询结果如下 NLS_LANGUAGE AMER ...