最近在做一个项目,其中一个功能就是多选框的全选与反选。感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间。我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能。代码加注释很清晰,见代码。

 <!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
padding: 0;
margin: 0;
}
.wrap {
width: 600px;
margin: 100px auto 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid #c0c0c0;
}
th,
td {
border: 1px solid #d0d0d0;
color: #404060;
padding: 10px;
}
th {
background-color: #09c;
font: bold 16px "微软雅黑";
color: #fff;
}
td {
font: 14px "微软雅黑";
}
tbody tr {
background-color: #f0f0f0;
} tbody tr:hover {
cursor: pointer;
background-color: #fafafa;
}
</style>
<script src="jquery.js"></script>
<script>
$(function () {
//1.获取标题栏的checkbox 注册点击事件
$("#j_cbAll").click(function () { //2.获取标题栏checkbox的状态
var isChecked = $(this).prop("checked");
//3.设置其他checkbox的状态
$("#j_tb input").prop("checked",isChecked);
}); //2.获取tbody中的checkbox 注册点击事件
$("#j_tb input").click(function () {
//2.1.获取所有tbody中checkbox的数量
var allCount = $("#j_tb input").length;
//2.2.获取所有被选中的checkbox的数量
var checkedCount = $("#j_tb input:checked").length;
//2.3.判断两个数量,如果选中的数量等于所有的数量 就让标题栏的checkbox选中 否则,不选中
if(checkedCount < allCount){
$("#j_cbAll").prop("checked",false);
}else{
$("#j_cbAll").prop("checked",true);
}
});
});
</script>
</head>
<body>
<div class="wrap">
<table>
<thead>
<tr>
<th>
<input type="checkbox" id="j_cbAll" />
</th>
<th>业务平台</th>
<th>项目名称</th>
<th>职工编码</th>
<th>职工名称</th>
<th>项目名称</th>
</tr>
</thead>
<tbody id="j_tb">
<tr>
<td>
<input type="checkbox" />
</td>
<td>基础平台</td>
<td>部门管理</td>
<td>部门管理</td>
<td>部门管理</td>
<td>部门管理</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>固定资产</td>
<td>部门管理</td>
<td>部门管理</td>
<td>部门管理</td>
<td>部门管理</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>运维管理</td>
<td>部门管理</td>
<td>部门管理</td>
<td>部门管理</td>
<td>部门管理</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>售后服务</td>
<td>人员管理</td>
<td>人员管理</td>
<td>人员管理</td>
<td>人员管理</td>
</tr>
</tbody>
</table>
</div>
</body> </html>

checkbox的全选与反选的更多相关文章

  1. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  2. 通过VBA实现checkbox的全选和反选

    checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click()  ‘checkbox为总控 ...

  3. jquery中checkbox的全选与反选

    <!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...

  4. js及jQuery实现checkbox的全选、反选和全不选

    html代码: <label><input type="checkbox" id="all"/>全选</label> < ...

  5. checkbox之全选和反选

    先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...

  6. Vue.js实现checkbox的全选和反选

    小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...

  7. Exameple014实现html中checkbox的全选,反选和全不选(1)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. js中checkbox的全选和反选的实现

    <head> <meta charset="utf-8"/> <script type="text/javascript"> ...

  9. 用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. ASP.NET MVC 3 技术(九) 301永久重定向不带www域名到带www的域名

    在 .net 4 中实现永久重定向非常容易,可以参考ASP.NET MVC3 技术(四) 永久重定向方法.今天主要说明下怎么在 asp.net mvc 3 实现从带www的域名永久重定向到不带www的 ...

  2. java——HashMap的实现原理,自己实现简单的HashMap

    数据结构中有数组和链表来实现对数据的存储,但是数组存储区间是连续的,寻址容易,插入和删除困难:而链表的空间是离散的,因此寻址困难,插入和删除容易. 因此,综合了二者的优势,我们可以设计一种数据结构-- ...

  3. webform(九)——JQuery基础(选择器、事件、DOM操作)

    JQuery -- 一个js函数包 一.选择器 1.基本选择器 ①id选择器:#       ②class选择器:.       ③标签名选择:标签名 ④并列选择:用,隔开          ⑤后代选 ...

  4. 读取properties配置文件的方法

    一般在.properties文件中配置数据库连接的相关信息,我们需要从中读取信息,以便建立与数据库的连接. 文件目录: application.properties配置信息: url=jdbc:ora ...

  5. C语言运算符优先级

    优先级 运算符 名称或含义 使用形式 结合方向 说明 1 [] 数组下标 数组名[常量表达式] 左到右 -- () 圆括号 (表达式)/函数名(形参表) -- . 成员选择(对象) 对象.成员名 -- ...

  6. 安装KVM及虚拟机

      创建lvm       安装kvm相关的包     需要安装的包                                                                 安 ...

  7. DIV宽度设置成100%,浏览器窗口缩小后,右边出现留白

    解决办法:给body添加min-width属性

  8. BZOJ 1901: Zju2112 Dynamic Rankings[带修改的主席树]【学习笔记】

    1901: Zju2112 Dynamic Rankings Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 7143  Solved: 2968[Su ...

  9. web测试与app测试的区别

    才开始做测试就接触的web端,后来也接触app端,所以在这里对于自己工作中所接触到的做一些总结(总要养成总结的好习惯). 对于web端和移动端app,功能方面的测试,例如测试设计方法这些都大同小异,都 ...

  10. 编写轻量ajax组件02-AjaxPro浅析

    前言 上一篇介绍了在webform平台实现ajax的一些方式,并且实现一个基类.这一篇我们来看一个开源的组件:ajaxpro.虽然这是一个比较老的组件,不过实现思想和源码还是值得我们学习的.通过上一篇 ...