本文主要是介绍jQuery学习(五)——使用JQ完成复选框的全选和全不选，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
1、在系统后台进行人员管理时，进行批量删除，使用jq完成全选和全不选
步骤分析：
第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！
2、具体代码实现：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8">
5 <title>使用jQuery完成复选框的全选和全不选</title>
6 <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
7 <script>
8 $(function(){
9 $("#select").click(function(){
10 //获取下面所有的复选框并将其选中状态设置跟编码的前端复选框保持一致
11 //attr的方法与JQ的版本有关，在1.8.3及以下有用
12 //$(".selectOne").attr("checked",this.checked);
13 $(".selectOne").prop("checked",this.checked);
14 });
15 });
16 </script>
17 </head>
18 <body>
19 <table border="1" width="500" height="50" align="center" id="tbl" >
20 <thead>
21 <tr>
22 <td colspan="4">
23 <input type="button" value="添加" />
24 <input type="button" value="删除" />
25 </td>
26 </tr>
27 <tr>
28 <th><input type="checkbox" id="select"></th>
29 <th>编号</th>
30 <th>姓名</th>
31 <th>年龄</th>
32 </tr>
33 </thead>
34 <tbody>
35 <tr >
36 <td><input type="checkbox" class="selectOne"/></td>
37 <td>1</td>
38 <td>张三</td>
39 <td>22</td>
40 </tr>
41 <tr >
42 <td><input type="checkbox" class="selectOne"/></td>
43 <td>2</td>
44 <td>李四</td>
45 <td>25</td>
46 </tr>
47 <tr >
48 <td><input type="checkbox" class="selectOne"/></td>
49 <td>3</td>
50 <td>王五</td>
51 <td>27</td>
52 </tr>
53 <tr >
54 <td><input type="checkbox" class="selectOne"/></td>
55 <td>4</td>
56 <td>赵六</td>
57 <td>29</td>
58 </tr>
59 <tr >
60 <td><input type="checkbox" class="selectOne"/></td>
61 <td>5</td>
62 <td>田七</td>
63 <td>30</td>
64 </tr>
65 <tr >
66 <td><input type="checkbox" class="selectOne"/></td>
67 <td>6</td>
68 <td>汾九</td>
69 <td>20</td>
70 </tr>
71 </tbody>
72 </table>
73 </body>
74 </html>注意：attr在jquery1.11版本不适用，采用prop()来替代(在各个版本都适用)。
这篇关于jQuery学习(五)——使用JQ完成复选框的全选和全不选的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
