jquery实现全选、全不选、反选操作

浏览数：35 / 时间：2015年06月09日

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html>
 3 <head>
 4     <title>新建网页</title>
 5     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 6     <meta name="description" content=""/>
 7     <meta name="keywords" content=""/>
 8     <script type="text/javascript" src="../jquery-1.4.4.js" ></script>
 9 
10     <script type="text/javascript">
11         function selAll(){
12             $(".ho").attr(‘checked‘,true);
13         }
14         function selAllNot(){
15             $(".ho").attr(‘checked‘,false);
16         }
17         function selFan(){
18             //反选操作
19             //获得全部复选框、遍历、判断当前选中情况
20             for(var i=0; i<$(".ho").length; i++){
21                 var flag = $(".ho:eq("+i+")").attr("checked");
22                 $(".ho:eq("+i+")").attr("checked",!flag);
23             }
24         }
25     </script>
26 </head>
27 <body>
28 <h2>复选框操作</h2>
29 
30 <input type="checkbox" name="hobby[]" id="hobbya" class="ho" value=‘a‘>篮球
31 <input type="checkbox" name="hobby[]" id="hobbyb" class="ho" value=‘b‘>足球
32 <input type="checkbox" name="hobby[]" id="hobbyc" class="ho" value=‘c‘>登山
33 <input type="checkbox" name="hobby[]" id="hobbyd" class="ho" value=‘d‘>排球
34 
35 <br /><br />
36 <input type="button" value="全选" onclick="selAll()" />
37 <input type="button" value="全不选" onclick="selAllNot()" />
38 <input type="button" value="反选" onclick="selFan()" />
39 </body>
40 </body>
41 </html>