JQuery实现全选、反选和取消功能

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>JQ实现正、反选</title>
 6 </head>
 7 <body>
 8     <table  border="1px" style="width: 200px;margin-bottom: 10px">
 9         <thead>
10             <tr>
11                 <th>#</th>
12                 <th>姓名</th>
13                 <th>性别</th>
14             </tr>
15         </thead>
16         <tbody>
17             <tr>
18                 <td><input type="checkbox"></td>
19                 <td>Alex</td>
20                 <td>女</td>
21             </tr>
22             <tr>
23                 <td><input type="checkbox"></td>
24                 <td>Egon</td>
25                 <td>女</td>
26             </tr>
27             <tr>
28                 <td><input type="checkbox"></td>
29                 <td>Qimi</td>
30                 <td>女</td>
31             </tr>
32         </tbody>
33     </table>
34     <input type="button"  value="全选" id="i1" class="c1">
35     <input type="button" value="反选" id="i2" class="c1">
36     <input type="button" value="取消" id="i3">
37     <script src="jquery-3.2.1.js"></script>
38     <script>
39         // <!-----------------------------------全选------------------------------------>
40         var $in_1 = $("#i1");
41         //用第一种循环的方式全部选中,each的循环体不用加索引取值
42         // $in_1.on("click",function () {
43         //     var $cheele = $(":checkbox");
44         //     $cheele.each(function () {
45         //         //为input标签增加固有属性checked
46         //         $(this).prop("checked",true);
47         //     })
48         // });
49         //用第二种循环的方式全部选中
50         // $in_1.click("click",function () {
51         //     var $cheele = $(":checkbox");
52         //     $.each($cheele,function () {
53         //         $(this).prop("checked",true);
54         //     })
55         // });
56         //另一种全选的方法
57             //要执行的语句不能直接你跟在","之后！！！
58         $in_1.on("click",function () {
59             $(":checkbox").prop("checked",true);
60         });
61         //-----------------------------------------取消--------------------------------------------------
62         var $in_2 = $("#i3");
63         $in_2.on("click",function () {
64             $(":checkbox").prop("checked",false);
65         });
66         //-----------------------------------------反选--------------------------------------------------
67         var $in_3 = $("#i2");
68         $in_3.on("click",function () {
69             $(":checkbox").each(function () {
70                 $(this).prop("checked",!$(this).prop("checked"));
71             })
72         });
73     </script>
74 </body>
75 </html>
posted on 2018-01-02 20:29 云烟||成雨阅读(399) 评论(0) 编辑收藏举报