dom中实现全选复选框的实例。

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>
posted @ 2017-10-19 15:34  落落无伤  阅读(267)  评论(0)    收藏  举报