考试中遇到的一道题

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

 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>

以上,这道题没有什么思路,知道从网上看到了有.checked这么个HTML DOM属性后思路才清晰起来,需要多记一些DOM属性。

原文地址:https://www.cnblogs.com/wangqun1234/p/7688070.html