最近在做一个项目，其中一个功能就是多选框的全选与反选。感觉很简单的小功能，一下子想不起来怎么实现了，很是耽误时间。我在想，我有必要整理下自己的一些小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>