PS：这个题考试时没有做出来，摘录下来好好作为实例。
| <script type="text/javascript"> | |
| //2、实现全选/全不选效果.如果下面的复选框有一个没有选中，全选复选框自动不勾选，如果全部选中则自动勾选 | |
| //全选/全不选 | |
| /* | |
| 1、找到全选框 | |
| 2、获取全选框选中属性 | |
| 3、获取所有的 CheckBox元素 | |
| 4、把这些CheckBox元素的选中属性设为全选框的选中属性 | |
| */ | |
| function check(obj){ | |
| // 1、找到全选框 | |
| // 2、获取全选框选中属性 | |
| // 3、获取所有的 CheckBox元素 | |
| var ckArr = document.getElementsByName("list"); | |
| // 4、把这些CheckBox元素的选中属性设为全选框的选中属性 | |
| for(var i = 0; i<ckArr.length;i++){ | |
| if(obj.checked){ | |
| ckArr[i].setAttribute("checked","checked"); | |
| }else{ | |
| ckArr[i].removeAttribute("checked"); | |
| } | |
| } | |
| } | |
| /* | |
| 1、获取所有CheckBox元素 | |
| 2、每个都判断是否选中 | |
| 3、如果有 没有选中的 全选框不选中 反之 选中 | |
| */ | |
| </script> | |
| </head> | |
| <body> | |
| <table width="100%" border="1" > | |
| <tr> | |
| <td><input id="qx" type="checkbox" onClick="check(this)">全选</td> | |
| <td>表头</td> | |
| <td>表头</td> | |
| <td>表头</td> | |
| </tr> | |
| <tr> | |
| <td><input name="list" type="checkbox"></td> | |
| <td>单元格</td> | |
| <td>单元格</td> | |
| <td>单元格</td> | |
| </tr> | |
| <tr> | |
| <td><input name="list" type="checkbox"></td> | |
| <td>单元格</td> | |
| <td>单元格</td> | |
| <td>单元格</td> | |
| </tr> | |
| <tr> | |
| <td><input name="list" type="checkbox"></td> | |
| <td>单元格</td> | |
| <td>单元格</td> | |
| <td>单元格</td> | |
| </tr> | |
| </table> | |
| </body> | |
| </html> | |
| <script type="text/javascript"> | |
| var ckarr = document.getElementsByName("list"); | |
| for(var i = 0; i<ckarr.length;i++){ | |
| ckarr[i].setAttribute("onclick","isxz()"); | |
| } | |
| function isxz(){ | |
| //1、获取所有CheckBox元素 | |
| var flag = true; | |
| // 2、每个都判断是否选中 | |
| for(var i = 0; i<ckarr.length;i++){ | |
| if(!ckarr[i].checked){ | |
| flag = false; | |
| } | |
| } | |
| // 3、如果有 没有选中的 全选框不选中 反之 选中 | |
| //flag = true ; 全部选中 | |
| //flag = false; 有 没有选中的 | |
| if(flag){ | |
| document.getElementById("qx").checked = true; | |
| }else{ | |
| document.getElementById("qx").checked = false; | |
| } | |
| } | |
| </script> |