jquery学习之1.21-小练习4实现对复选框的全选，全不选，反选

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

通过prop和removeAttr方法实现对复选框的全选，全不选，反选。

效果图如下：

代码如下：

 1 <%@ page language="java" import="java.util.*"
 2  pageEncoding="utf-8"%>
 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 4 <html>
 5   <head>
 6   <title>11</title>    
 7   <style type="text/css">
 8   body {height:100%;width:50%;margin:50px auto;padding:20px;border:1px solid black;}
 9   </style>
10   <script type="text/javascript" src="../js/jquery-1.11.0.js">
11   </script>
12   <script language="javascript">
13    $(document).ready(function()
14   {          
15          $("#ckAll").click(function(){
16          if(this.checked)
17          {
18              alert("aaa");     
19              $("input[name=‘items‘]").prop("checked","checked");
20              /*备注：此时如果是用attr代替prop，会出现第二次选中这个checkbox的时候，
21              无法实现后面的checkbox全部选中。
22              我的理解：第一次点击全选，所有选中，再点击，则取消全选，
23              此时会把属性checked删除，删除后attr使用时由于checked属性不存在，故无法赋值。需要看attr和prop源代码才能知道其中的区别，学习中，详细原理可以看
                http://blog.csdn.net/chaiyining007/article/details/8218038
24              */
25          }
26          else
27          {
28              alert("bbb");
29              $("input[name=‘items‘]").removeAttr("checked");             
30          }         
31          });     
32          $("#ckNall").click(function (){
33              $("input[name=‘items‘]").removeAttr("checked");         
34          });
35          $("#ckAll2").click(function (){
36              $("input[name=‘items‘]").prop("checked","checked");    
37          });
38          $("#fanxuan").click(function(){
39              $("input[name=‘items‘]").each(function(){
40                  if(this.checked){
41                   $(this).removeAttr("checked");
42                  }
43                  else{
44                  $(this).prop("checked","checked");    
45                  }
46              });
47                   
48              
49          });
50           
51    });
52   
53   </script>
54   </head> 
55   <body>
56     <div>
57     <input type="checkbox" id="ckAll" value="全选或者全不选">全选/全不选</input>
58     <input type="checkbox" id="ck1" name="items" value="上小学">上小学</input>
59     <input type="checkbox" id="ck2" name="items" value="上中学">上中学</input>
60     <input type="checkbox" id="ck3" name="items" value="上大学">上大学</input>
61     <br/>
62     <input type="button" id="ckAll2"  value="全选"/>
63     <input type="button" id="ckNall" value="全不选"/>
64     <input type="button" id="fanxuan" value="反选"/>
65     
66     </div>
67   </body>
68 </html>