全选联动

　　实现全选联动，思路为点击全选框，下面的子选框全部被选中；子选框全部被选中时，全选框为选中状态；取消勾选其中一个子选框，全选框为未选中状态；
　　下面上代码：
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 //样式
 7     <style>
 8         .box{
 9             width: 300px;
10             padding: 20px;
11             border: 1px solid #000;
12             border-radius: 5px;
13             margin: 20px auto;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="box" id="item">
19     <input type="checkbox">全选
20     <div class="list">
21         <input type="checkbox">
22         <input type="checkbox">
23         <input type="checkbox">
24     </div>
25 </div>
26 //以下为js代码
27 <script>
28     function checkAll(id){
29         var item=document.getElementById(id);
30         var checkAll=item.getElementsByTagName("input")[0];
31         var list=item.getElementsByTagName("div")[0];
32         var inputs=list.getElementsByTagName("input");
33 //给一个计数器
34         var n=0;
35         checkAll.onclick=function(){
36             /*点击全选，下边的全选*/
37             if(checkAll.checked==true){
38                 for(var i=0;i<inputs.length;i++){
39                     inputs[i].checked=true;
40                 }
41                 n=3;
42             }else{
43                 for(var i=0;i<inputs.length;i++){
44                     inputs[i].checked=false;
45                 }
46                 n=0;
47             }
48         };
49     
50         for(var i=0;i<inputs.length;i++){
51 //下面选框的监听事件
52             inputs[i].onclick=function(){
53                 if(this.checked==true){
54                     n++;
55                 }else{
56                     n--;
57                 }
58                 //当下面得三个框都选中时
59                 if(n==3){
60                     checkAll.checked=true;
61                 }else{
62                     checkAll.checked=false;
63                 }
64             }
65         }
66     }
67 //调用方法
68     checkAll("item");
69 
70 </script>
71 </body>
72 </html>
实现代码

 以下为效果图：

posted @ 2017-09-05 09:31  XJian  阅读(312)  评论(0)  编辑  收藏  举报