1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Title</title>
6 </head>
7 <body>
8
9 <input type="button" value="全选" onclick="checkAll()">
10 <input type="button" value="取消" onclick="cancelAll()">
11 <input type="button" value="反选" onclick="reverseAll()">
12 <table border="1" >
13 <thead>
14 <tr>
15 <td>选择</td>
16 <td>IP</td>
17 <td>端口</td>
18 </tr>
19 </thead>
20 <tbody id="tb">
21 <tr>
22 <td><input type="checkbox"></td>
23 <td>192.168.1.1</td>
24 <td>8080</td>
25 </tr>
26 <tr>
27 <td><input type="checkbox"></td>
28 <td>192.168.1.1</td>
29 <td>8080</td>
30 </tr>
31 <tr>
32 <td><input type="checkbox"></td>
33 <td>192.168.1.1</td>
34 <td>8080</td>
35 </tr>
36 </tbody>
37 </table>
38 <!--引入jquery-->
39 <script src =‘jquery-1.12.4.js‘></script>
40 <script>
41 // 全选
42 function checkAll() {
43 $(‘#tb :checkbox‘).prop(‘checked‘,true);//将id是tb的下面的所有的checkbox的值设置为true,porp是列出所有元素
44 }
45 // 取消
46 function cancelAll() {
47 $(‘#tb :checkbox‘).prop(‘checked‘,false);//将id是tb的下面的所有的checkbox的值设置为false
48 }
49 // 反选
50 function reverseAll() {
51 $(‘#tb :checkbox‘).each(function () {
52 // this代指当前循环的每一个元素
53 // 反选
54 // console.log(this);
55 // console.log($(this));
56
57 //Dom来实现
58 // if(this.checked){
59 // this.checked = false;
60 // }else{
61 // this.checked = true;
62 // }
63
64 //jQuery来实现
65 // prop：
66 // prop(‘checked‘)查看是否被选定
67 // prop(‘checked‘,false)将值设置为false
68 //
69
70
71 // if($(this).prop(‘checked‘)){
72 // $(this).prop(‘checked‘,false);
73 // }else {
74 // $(this).prop(‘checked‘,true);
75 // }
76
77 // 三元运算来实现
78 // v = 条件？真值：假值
79 // var v = $(this).prop(‘checked‘)?false:true;
80 // $(this).prop(‘checked‘,v);设置值
81 // 也可以写成下面这种
82 $(this).prop(‘checked‘)?$(this).prop(‘checked‘,false):$(this).prop(‘checked‘,true);
83
84
85 })
86 }
87 </script>
88
89 </body>
90 </html>
知识点:
prop()方法设置或返回被选元素的属性和值
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对
each（）方法规定为每个匹配元素规定运行的函数。用法each(function(){})
效果如下图:
原文地址：https://www.cnblogs.com/topzhao/p/9206624.html
时间： 2024-11-07 00:28:52