考试中遇到的一道题

最新推荐文章于 2025-04-15 17:56:36 发布

weixin_30564785

最新推荐文章于 2025-04-15 17:56:36 发布

阅读量141

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wangqun1234/p/7688070.html

本文介绍了一种使用JavaScript实现全选框与多个子选项框联动的方法。当全选框被选中时，所有子选项框也会自动选中；反之，若所有子选项都被选中，全选框也会自动勾选。文章提供了具体的实现代码。

全选框点击子选项全选，子选项全选后全选框自动勾选

 1 <script>
 2 //第一个函数设置全选
 3 function quanxuan(){ 
 4         var a = document.getElementsByClassName("checkbox"); //获取子选项
 5         var b = document.getElementById("quanxuan"); //获取全选框
 6 //for循环循环获取的子选项的数组
 7         for(var i=0;i<a.length;i++){
 8             a[i].checked = b.checked; //之前不知道有.checked，用来获取checkbox选择框的内容，当全选框勾选时，使所有的子选项的chackbox选择框的内容等于全选框chackbox的内容，就是√
 9         }
10 }
11 //第二个函数设置反向勾选
12 function gouxuan(){
13         var a = document.getElementsByClassName("checkbox"); //同样获取所有子选项和全选框
14         var b = document.getElementById("quanxuan");
15 //利用for循环检查所有子选项
16         for(var i=0;i<a.length;i++){
17 //如果所有的子选项的.checked为真，即全部都勾选了，则全选框的.checked为真（勾选）；若有至少一个子选项为勾选，则全选框不自动勾选
18             if(a[i].checked=true){
19                 b.checked=true;
20                 break;
21             }else{
22                 b.checked=false;
23             }
24         }
25     }
26     
27     
28     
29 </script>
30 
31 <body>
32 <input id ="quanxuan" type="checkbox" onClick="quanxuan()">全选<br>
33 <input class="checkbox" type="checkbox" onClick="gouxuan()">1<br>
34 <input class="checkbox" type="checkbox" onClick="gouxuan()">2<br>
35 <input class="checkbox" type="checkbox" onClick="gouxuan()">3
36 </body>