1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>jQuery实现全选，全不选，反选
</title>
6
7 <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
8 <script type="text/javascript">
9 $(function() {
10
11 $("#quanxuan").click(function() {
12 $("input[name=interest]").attr("checked", true);
13 });
14
15 $("#quanbuxuan").click(function() {
16 $("input[name=interest]").attr("checked", false);
17 });
18
19 $("#fanxuan").click(function() {
20 var arr = $("input[name=interest]");
21 arr.each(function(i) {
22 var obj = arr.eq(i);
23 obj.attr("checked", !obj.attr("checked"));
24 /* if(obj.attr('checked')==true){
25 obj.attr("checked",false);
26 }else{
27 obj.attr("checked",true);
28 } */
29 });
30 });
31 });
32 </script>
33
34 </head>
35
36 <body>
37
38 兴趣爱好：
39 <input name="interest" type="checkbox" value="eating" checked="checked" />吃
40 <input name="interest" type="checkbox" value="drinking" />喝
41 <input name="interest" type="checkbox" value="playing" />玩
42 <input name="interest" type="checkbox" value="sleeping" />睡
43 <br />
44 <input type="button" value="全选" id="quanxuan" />
45 <input type="button" value="全不选" id="buxuan" />
46 <input type="button" value="反选" id="fanxuan" />
47
48
49 </body>
50 </html>
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>jQuery实现全选，全不选，反选
</title>
6 <script type="text/javascript" src="../js/jquery-1.4.3.js"></script>
7
8 <script type="text/javascript">
9 $(function() {
10 $("#all").click(function() {
11 //$(":checkbox").attr("checked","true");
12 $(":checkbox").each(function(index, ele) {
13 ele.checked = true;
14 });
15 });
16
17 $("#notAll").click(function() {
18 //$(":checkbox").attr("checked","false");
19 $(":checkbox").each(function(index, ele) {
20 ele.checked = false;
21 });
22 });
23
24 $("#reverse").click(function() {
25 $(":checkbox").each(function(index, ele) {
26 ele.checked = !ele.checked;
27 });
28 });
29
30 //---------------------------------------------------------------
31
32 $("input[name='all']").click(function() {
33 //全选框状态值
34 var flag = this.checked;
35 //选中所有
36 $("input[name='id']").each(function(index, ele) {
37 ele.checked = flag;
38 });
39 });
40
41 $("input[name='id']").click(function() {
42 //找到所有子复选框
43 var $sons = $("input[name='id']");
44
45 //找到所有选中的子复选框
46 var $checksons = $("input[name='id']:checked");
47
48 if ($checksons.length == $sons.length) {
49 $("input[name='all']")[0].checked = true;//转换为dom对象
50 } else {
51 $("input[name='all']")[0].checked = false;
52 }
53 });
54
55 });
56 </script>
57
58 </head>
59 <body>
60 <button id="all">全选
</button>
61 <button id="notAll">全不选
</button>
62 <button id="reverse">反选
</button>
63 <br>
64 <input type="checkbox" name="fav" value="1" />爱好1
65 <input type="checkbox" name="fav" value="2" />爱好2
66 <input type="checkbox" name="fav" value="3" />爱好3
67 <input type="checkbox" name="fav" value="4" />爱好4
68 <input type="checkbox" name="fav" value="5" />爱好5
69 <input type="checkbox" name="fav" value="6" />爱好6
70 <input type="checkbox" name="fav" value="7" />爱好7
71 <hr>
72
73 <table border="1" cellspacing="0" width="60%" align="center">
74 <tr>
75 <th><input type="checkbox" name="all" />
76 </th>
77 <th>编号
</th>
78 <th>姓名
</th>
79 <th>性别
</th>
80 <th>地址
</th>
81 </tr>
82 <tr>
83 <td><input type="checkbox" name="id" /></td>
84 <td>1
</td>
85 <td>张三
</td>
86 <td>男
</td>
87 <td>北京
</td>
88 </tr>
89 <tr>
90 <td><input type="checkbox" name="id" /></td>
91 <td>2
</td>
92 <td>张三
</td>
93 <td>男
</td>
94 <td>北京
</td>
95 </tr>
96 <tr>
97 <td><input type="checkbox" name="id" /></td>
98 <td>3
</td>
99 <td>张三
</td>
100 <td>男
</td>
101 <td>北京
</td>
102 </tr>
103 <tr>
104 <td><input type="checkbox" name="id" /></td>
105 <td>4
</td>
106 <td>张三
</td>
107 <td>男
</td>
108 <td>北京
</td>
109 </tr>
110 <tr>
111 <td><input type="checkbox" name="id" /></td>
112 <td>5
</td>
113 <td>张三
</td>
114 <td>男
</td>
115 <td>北京
</td>
116 </tr>
117 <tr>
118 <td><input type="checkbox" name="id" /></td>
119 <td>6
</td>
120 <td>张三
</td>
121 <td>男
</td>
122 <td>北京
</td>
123 </tr>
124 <tr>
125 <td><input type="checkbox" name="id" /></td>
126 <td>7
</td>
127 <td>张三
</td>
128 <td>男
</td>
129 <td>北京
</td>
130 </tr>
131 </table>
132 </body>
133 </html>
转载于:https://www.cnblogs.com/Azmzb/p/4916046.html
