checkbox　全选操作 

 1 <html>
 2 <head></head>
 3 <body>
 4  <div id="places">
 5    <input type="checkbox" name="chx" value="1" onclick="_check_status(this)"/>香港
 6    <input type="checkbox" name="chx" value="2" onclick="_check_status(this)"/>澳门
 7    <input type="checkbox" name="chx" value="3" onclick="_check_status(this)"/>深圳
 8    <input type="checkbox" name="chx" value="4" onclick="_check_status(this)"/>台北
 9    <input type="checkbox" name="chx" value="5" onclick="_check_status(this)"/>乌镇
10  </div>
11  
12  <div id="allplaces">
13     <input type="checkbox" id="checkall" name="chx" value="0" onclick="_check_all(this)"/>全选
14  </div>
15  </body>
16  <script>
17      //点击“全选”， 所有地方都选上
18      function _check_all(obj)
19      {     
20         var nodes = document.getElementById("places").childNodes;              
21         if(obj.checked)
22         {          
23             for (var i=0; i < nodes.length; i++)
24             {        
25                if(nodes[i].type == "checkbox")
26                {
27                    nodes[i].checked = true;       
28                }          
29             }                          
30         }
31         else
32         {
33             for (var i=0; i < nodes.length; i++)
34             {        
35                if(nodes[i].type == "checkbox")
36                {
37                    nodes[i].checked = false;       
38                }          
39             }        
40         } 
41      }
42      
43      //每一个checkbox的状态校验
44      function _check_status(obj)
45      {
46         var nodes = document.getElementById("places").childNodes; 
47         if(obj.checked)
48         {
49             for (var i=0; i < nodes.length; i++)
50             {        
51                if((nodes[i].type == "checkbox") &&  !nodes[i].checked)
52                {
53                     document.getElementById("checkall").checked = false; 
54                     return;                   
55                }          
56             }
57             
58             document.getElementById("checkall").checked = true; 
59         }
60         else
61         {
62             document.getElementById("checkall").checked = false;
63         }
64      }
65          
66  </script>
67 </html>

 

posted @ 2014-08-02 12:16  未来动力  阅读(383)  评论(0)    收藏  举报