@{
　　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. 【python】——python3 与 python2 的那些不兼容

    python2 python3 string.uppercase string.ascii_uppercase string.lowercase string.ascii_lowercase xran ...

  2. Centos&Redhat下bcm43142博通无线网卡linux驱动之二

    上次通过更换内核实现成功编译驱动无线网卡,但是启动到系统原内核下依然没有bcm43142的驱动,遂准备在原内核下编译驱动,记录一下 ps:更推荐这种方法,避免因更换内核出现其他兼容性问题 1.准备驱动 ...

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

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

  4. 嵌入式开发之zynqMp ---Zynq UltraScale+ MPSoC 图像编码板zcu102

    1.1 xilinx zynqMp 架构 1.1.1 16nm 级别工艺 Zynq UltraScale+  MPSoC架构 Xilinx新一代Zynq针对控制.图像和网络应用推出了差异化的产品系,这 ...

  5. 在vue中使用highcharts的仪表图等扩展

    仪表图(”solidgauge“)在highcharts中属于扩展,单独引入highcharts使用仪表图会报错,需要在你的组件中做一谢其他的引入: // 最主要是这里模块的引入 很坑 import ...

  6. iOS - UITableView中有两种重用Cell的方法

    UITableView中有两种重用Cell的方法: - (id)dequeueReusableCellWithIdentifier:(NSString *)identifier; - (id)dequ ...

  7. Oracle误删除数据的恢复方法（转）

    来源:原创网站北京北亚数据恢复中心,转载须注明出处. 学习数据库时,我们只是以学习的态度,考虑如何使用数据库命令语句,并未想过工作中,如果误操作一下,都可能导致无可挽回的损失.当我在工作中真正遇到这些 ...

  8. 最强Android书 架构大剖析 作者网站

    http://newandroidbook.com/    jonathan levin   (最强Android书 架构大剖析) http://newandroidbook.com/AIvI-M-R ...

  9. C# 如何通过mailto标签和SMTP协议两种方式发送邮件

    本文主要讲解如何通过如现mailto标签和SMTP协议两种方式发送邮件,下面就直入主题 方法一.通过mailto标签发送邮件 通过mailto不是正真意义上的发送邮件,它只是会自动调用我们本地默认的邮 ...

  10. yum安装mysql-5.6(centos7)

    centos 7.3 安装mysql 5.6 rpm -Uvh http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm yu ...