checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选。感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间。我在想,我有必要整理下自己的一些小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的全选与反选的更多相关文章
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- 通过VBA实现checkbox的全选和反选
checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click() ‘checkbox为总控 ...
- jquery中checkbox的全选与反选
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- checkbox之全选和反选
先导入jquery组件 <input type="checkbox" id="checkall">全选<input type="ch ...
- Vue.js实现checkbox的全选和反选
小颖之前写的代码存在一个bug,就是当你选择全选的时候去掉后面的一个选项,再点全选结果就是反的了.很感谢博客园的朋友帮我改了这个问题嘻嘻,下面一起来看看具体是怎么实现的吧. 1.html <te ...
- Exameple014实现html中checkbox的全选,反选和全不选(1)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- js中checkbox的全选和反选的实现
<head> <meta charset="utf-8"/> <script type="text/javascript"> ...
- 用JavaScript实现CheckBox的全选取消反选,及遮罩层中添加内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Laravel大型项目系列教程(二)之用户管理
Laravel大型项目系列教程(二) 一.前言 本节教程将大概实现用户的注册.修改个人信息.管理用户功能. 二.Let's go 1.创建用户注册视图 $ php artisan generate:v ...
- iOS系列 基础篇 02 StoryBoard 故事板文件
iOS基础 02 StoryBoard 故事板文件 目录: 1. 故事板的导航特点 2. 故事板中的Scene和Segue 3. 本文最后 在上篇HelloWorld工程中有一个Main.storyb ...
- VS插件开发 - 登录身份验证
[附加] 很多朋友问那个VS背景怎么弄的,我刚刚已经抽时间把制作步骤发出来了: 请参见<VS插件开发 - 个性化VS IDE编辑器,瞬间 高 大 上>. 最近一直在忙着一些事情,一直没有发 ...
- mysql 触发器
触发器(trigger)是SQL server 提供给程序员和数据分析员来保证数据完整性的一种方法,它是与表事件相关的特殊的存储过程,它的执行不是由程序调用,也不是手工启动,而是由事件来触发, 比如当 ...
- 分布式一致性算法--Raft
前面一篇文章讲了Paxos协议,这篇文章讲它的姊妹篇Raft协议,相对于Paxos协议,Raft协议更为简单,也更容易工程实现.有关Raft协议和工程实现可以参考这个链接https://raft.gi ...
- MySQL Performance-Schema(二) 理论篇
MySQL Performance-Schema中总共包含52个表,主要分为几类:Setup表,Instance表,Wait Event表,Stage Event表Statement Event表,C ...
- Mac卸载MySQL
打开终端输入以下指令即可 sudo rm -rf /Library/StartupItems/MySQLCOM sudo rm -rf /Library/PreferencePanes/My* rm ...
- Linux 信号(二)—— signal 函数
弗洛伊德认为:要解决这些苦恼,当事人就要通过回忆并理解自己早期的童年经历,来获得对潜意识冲突的顿悟.弗洛伊德的疗法被称为“精神分析” (psychoanalysis),在 20 世纪的很长一段时间被心 ...
- java util 下的concurrent包
------------------------------------------java util 下的concurrent包--------并发包--------------------.jav ...
- c# MongoDB 经纬度应用示例
class Program { static string mongodb = "mongodb://127.0.0.1:27017"; ...