今天记录一下一道练习题
《题目》
实现全选/全部选效果 如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选.
《做题思路》
1、找到全选框
2、获取全选框选中属性
3、获取所有的 CheckBox元素
4、把这些CheckBox元素的选中属性设为全选框的选中属性
《代码》
1 <html> 2 <head> 3 <script type="text/javascript"> 4 function check(obj){ 5 // 1、找到全选框 6 // 2、获取全选框选中属性 7 // 3、获取所有的 CheckBox元素 8 var ckArr = document.getElementsByName("list"); 10 // 4、把这些CheckBox元素的选中属性设为全选框的选中属性 11 for(var i = 0; i<ckArr.length;i++){ 12 if(obj.checked){ 13 //ckArr[i].setAttribute("checked","checked"); 14 ckArr[i].checked = true//选中 15 }else{ 16 ckArr[i].checked = false//不选中 17 //ckArr[i].removeAttribute("checked"); 18 } 20 } 21 } 22 </script> 23 </head> 24 <body> 25 </body> 26 </html> 27
《做题思路》
1、获取所有CheckBox元素
2、每个都判断是否选中
3、如果有 没有选中的 全选框不选中 反之 选中
《代码》
1 <body> 2 <table width="100%" border="1" > 3 <tr> 4 <td><input id="qx" type="checkbox" onClick="check(this)">全选</td> 5 <td>表头</td> 6 <td>表头</td> 7 <td>表头</td> 8 </tr> 9 <tr> 10 <td><input name="list" type="checkbox"></td> 11 <td>单元格</td> 12 <td>单元格</td> 13 <td>单元格</td> 14 </tr> 15 <tr> 16 <td><input name="list" type="checkbox"></td> 17 <td>单元格</td> 18 <td>单元格</td> 19 <td>单元格</td> 20 </tr> 21 <tr> 22 <td><input name="list" type="checkbox"></td> 23 <td>单元格</td> 24 <td>单元格</td> 25 <td>单元格</td> 26 </tr> 27 28 29 </table> 30 </body>
1 <script type="text/javascript"> 2 var ckarr = document.getElementsByName("list");
3 4 for(var i = 0; i<ckarr.length;i++){ 5 ckarr[i].setAttribute("onclick","isxz()"); 6 } 7 8 function isxz(){ 9 //1、获取所有CheckBox元素 10 var flag = true; 11 // 2、每个都判断是否选中 12 for(var i = 0; i<ckarr.length;i++){ 13 if(!ckarr[i].checked){ 14 flag = false; 15 } 16 } 17 // 3、如果有 没有选中的 全选框不选中 反之 选中 18 //flag = true ; 全部选中 19 //flag = false; 有 没有选中的 20 if(flag){ 21 document.getElementById("qx").checked = true; 22 }else{ 23 document.getElementById("qx").checked = false; 24 } 25 } 26 </script>