全选框点击子选项全选，子选项全选后全选框自动勾选
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属性。