第三天记录

今天记录一下一道练习题

《题目》

　　实现全选/全部选效果如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选.

《做题思路》

　　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>