[理论知识]
我们在实际开发应用程序的过程中，经常会遇到复选框全选和反选的效果需求，本文小博老师就为大家演示一下，如何使用JQuery框架实现复选框全选和反选的效果。
[步骤解读一]界面布局
首先我们创建一个HTML页面，核心代码如下：
<body>
<div align="center" id="div_document">
<div align="left" id="div_document_content">
<table align="center" border="1px" cellpadding="2px" cellspacing="2px">
<tr>
<td><input type="checkbox" id="cbxAll" /></td>
<td>课程名称</td>
<td>课程时间</td>
</tr>
<tr>
<td><input type="checkbox" name="cbxGroup" /></td>
<td>JavaSE标准版</td>
<td>160课时</td>
</tr>
<tr>
<td><input type="checkbox" name="cbxGroup" /></td>
<td>JavaWeb设计</td>
<td>96课时</td>
</tr>
<tr>
<td><input type="checkbox" name="cbxGroup" /></td>
<td>SQL结构化数据库</td>
<td>48课时</td>
</tr>
<tr>
<td><input type="checkbox" name="cbxGroup" /></td>
<td>JavaEE标准版</td>
<td>256课时</td>
</tr>
<tr>
<td><input type="checkbox" name="cbxGroup" /></td>
<td>Android应用</td>
<td>128课时</td>
</tr>
<tr>
<td><input type="checkbox" name="cbxGroup" /></td>
<td>就业辅导专题</td>
<td>32课时</td>
</tr>
</table>
</div>
</div>
</body>
使用浏览器访问，看到页面布局效果如下：
为了让用户选择选项更加方便，我们把最上边的复选框作为功能型复选框，当用户选中它时，所有的课程都自动选中，当用户取消它的选中属性后，所有的课程自动取消选中属性。
我们为页面增加javascript代码，核心代码如下：
<script src="script/jquery-1.4.2.min.js"></script>
<script>
$(document).ready(function(){
// 为 功能复选框添加点击事件
$("#cbxAll").click(function(){
// 将所有课程复选框的选中属性 设置成与功能复选框的选中属性一致
$(".cbxGroup").attr("checked",$(this).attr("checked"));
});
});
</script>
通过浏览器访问，现在我们看到功能复选框的全选和反选效果就实现了：
来源：oschina
链接：https://my.oschina.net/u/2971691/blog/790129