@{
　　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. 【规范】前端编码规范——jquery 规范

    使用单引号 不推荐 $("div").html("<img src='1.jpg'>"); 推荐 $('div').html('<img sr ...

  2. CUDA加opencv复现导向滤波算法

    CUDA是GPU通用计算的一种,其中现在大热的深度学习底层GPU计算差不多都选择的CUDA,在这我们先简单了解下其中的一些概念,为了好理解,我们先用DX11里的Compute shader来和CUDA ...

  3. Gin框架初识

    一.安装 使用go下载gin库,命令行输入:go get github.com/gin-gonic/gin ,一般使用需要的依赖: import "github.com/gin-gonic/ ...

  4. 【React + flask】跨域服务及访问

    Flask from flask import Flask , request from flask_cors import * import flask import json import pic ...

  5. Easy UI combogrid动态加载数据

    场景: datagrid的每一行允许编辑,一行中有一个字段,编辑时,提供下拉框选项,供选择. 下拉框选项有多个列.如下图所示:(点击红框内的下拉按钮,会弹出绿框内的内容) 要求: 每行弹出的下拉框内容 ...

  6. 企业SaaS模式的优缺点

    好处: 1.降低成本 项目成本.人员成本 2.使用简单 无需系统维护,用户只需登录就可以享受系统的功能 3.安全性 SaaS模式下,企业用户最关注的是自己的数据能不能得到安全保护. A.涉及的数据有哪 ...

  7. docker 应用-2（Dockerfile 编写以及镜像保存提交）

    我们可以从docker hub上pull别人的镜像,也可以将容器进行修改,然后commit镜像,并把镜像push到docker hub上被被人使用.但是,直接pull或者push镜像的方式太过笨重,尤 ...

  8. 下载m3u8视频

    分两种情况 同时支持m3u8和mp4文件 某些视频同时支持m3u8和mp4视频文件,将m3u8改成mp4后直接: wget -c http://www.xxx.com/xxxx.mp4 只有m3u8视 ...

  9. [原创]WB Android客户端架构总结：发WB工作队列设计

    先简单说下需求,发一条WB包含多种类型,例如图片.视频.文字等,发送工作不能阻塞UI,工作队列易于扩展,方便优化. 几个重要的类: JobManager:统一管理Job列表,包括job的添加.启动.终 ...

  10. 对于input 框限定输入值为正整数，浮点型的js

    <input type="text" value="" onkeyup="only_num(this)" onblur="o ...