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

 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>

 

你可能感兴趣的:(jquery)