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>
原文地址：https://www.cnblogs.com/liuyinzhou/p/8179021.html
时间： 2024-11-01 13:44:47