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 ...
随机推荐
- OutPut子句的使用限制
Output子句很方便,多数情况下可以省略了更新后插入或者删除后插入操作表,将2个语句变成1个语句操作.不管从语句美观还是效率上都是有不错的提升, 但是对于Output自身,也是有一些限制的. 从文档 ...
- python处理json和redis hash的坑
1.使用MySQLdb读取出来的数据是unicode字符串,如果要写入redis的hash中会变成 "{u'eth0_outFlow': 2.5, u'eth1_inFlow': 3.44} ...
- Python来做应用题及思路
Python来做应用题及思路 最近找工作头疼没事就开始琢磨python解应用题应该可以,顺便还可以整理下思路当然下面的解法只是个人理解,也欢迎大佬们给意见或者指点更好的解决办法等于优化代码了嘛,也欢迎 ...
- 【Linux】AWK入门
什么是AWK AWK是一种用于处理文本的编程语言工具,一个模式匹配程序.一个典型的示例是将数据转换成格式化的报告. 在命令行输入如下awk命令: awk -F":" '{ prin ...
- 【GSM】GTM900C的应用——短信
虽说GSM已经很老旧,但其低廉的价格,非常适合一些需要小数据上网传输和短信等功能的应用场合. 不知道GSM能否像51单片机一样,在低端应用中长久不衰.GTM900C发送短信,支持两种模式,TXT和PD ...
- kettle中变量的设置和使用介绍
有没有能统一管理一个参数,然后让所有的transformation和job都可以读到呢? 答案是有 1.首先,打开.kettle\kettle.properties(个人主机是:C:\Users\fo ...
- BZOJ 1927: [Sdoi2010]星际竞速
1927: [Sdoi2010]星际竞速 Time Limit: 20 Sec Memory Limit: 259 MBSubmit: 2051 Solved: 1263[Submit][Stat ...
- 当AngularJS POST方法碰上PHP
问题描述 怎么POST过去给PHP都收不到资料? $_POST方法取不到正确的传入值! 原理说明 AngularJS这套framework使用的AJAX方法中,资料传递的格式为JSON,送出去的hea ...
- [EF2]Sneak Preview: Persistence Ignorance and POCO in Entity Framework 4.0
http://blogs.msdn.com/b/adonet/archive/2009/05/11/sneak-preview-persistence-ignorance-and-poco-in-en ...
- 日货EmEditor的使用小技巧
1.查看->大纲向导,可层级显示HTML 2.工具->插件->资源管理器,可在左侧显示资源管理器 3.工具->插件->单词自动完成,可实现单词智能提示功能