码迷,mamicode.com
首页 > Web开发 > 详细

jQuery学习(五)——使用JQ完成复选框的全选和全不选

时间:2017-08-24 23:59:26      阅读:370      评论:0      收藏:0      [点我收藏+]

标签:代码   click   函数   src   事件   html   添加   val   height   

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完成复选框的全选和全不选

标签:代码   click   函数   src   事件   html   添加   val   height   

原文地址:http://www.cnblogs.com/cxq1126/p/7425606.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!