全选联动

最新推荐文章于 2022-04-18 19:49:16 发布

weixin_30361753

最新推荐文章于 2022-04-18 19:49:16 发布

阅读量58

点赞数

原文链接：http://www.cnblogs.com/xjean/p/7476938.html

版权

　　实现全选联动，思路为点击全选框，下面的子选框全部被选中；子选框全部被选中时，全选框为选中状态；取消勾选其中一个子选框，全选框为未选中状态；

　　下面上代码：

 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>

实现代码

以下为效果图：

转载于:https://www.cnblogs.com/xjean/p/7476938.html

weixin_30361753

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
全选联动

　　实现全选联动，思路为点击全选框，下面的子选框全部被选中；子选框全部被选中时，全选框为选中状态；取消勾选其中一个子选框，全选框为未选中状态；　　下面上代码： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 ...
复制链接

扫一扫

全选联动

“相关推荐”对你有帮助么？