码迷,mamicode.com
首页 > 其他好文 > 详细

checkbox 全选操作

时间:2014-08-02 15:09:13      阅读:227      评论:0      收藏:0      [点我收藏+]

标签:des   style   blog   color   io   for   cti   ar   

 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>

 

checkbox 全选操作,布布扣,bubuko.com

checkbox 全选操作

标签:des   style   blog   color   io   for   cti   ar   

原文地址:http://www.cnblogs.com/yiliweichinasoft/p/3886795.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!