JavaScript案例之全选

原创 2018-11-12 13:43:49 224
摘要:先获取全选复选框dom对象和复选框组的dom对象列表,然后for循环遍历复选组,在循环体中判断全选框的选中的状态,给每次循环到复选组中的对象的属性checked设置值代码如下:<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>全选&l

先获取全选复选框dom对象和复选框组的dom对象列表,然后for循环遍历复选组,在循环体中判断全选框的选中的状态,给每次循环到复选组中的对象的属性checked设置值

代码如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>全选</title>
 <style type="text/css">
  .box{width: 120px;margin:20px auto;border:1px solid #ccc;border-radius: 2px;padding: 10px 10px;}
  .box div{border-bottom: 1px solid #ccc;}
  .box input{margin:8px 4px;}
 </style>
 <script type="text/javascript">
  function checkAll(){
   var checkAll,items
   checkAll = document.getElementById("checkAll");//获取全选框
   items = document.getElementsByName('item[]');//获取选框组
   for(var i=0;i<items.length;i++){
    if(checkAll.checked){
     items[i].checked = true;//如果全选框是选中状态,则复选框组中的对象设置其为选中
    }else{
     items[i].checked = false;//反之,则设置复选框组中的对象为不选中状态
    }
   }
  }
 </script>
</head>
<body>
 <div>
  <div>
   <input type="checkbox" id="checkAll" onclick="checkAll()"><label for="checkAll">全选</label>
  </div>
  <input type="checkbox" name="item[]">选项1<br>
  <input type="checkbox" name="item[]">选项2<br>
  <input type="checkbox" name="item[]">选项3<br>
  <input type="checkbox" name="item[]">选项4<br>
  <input type="checkbox" name="item[]">选项5<br>
  <input type="checkbox" name="item[]">选项6<br>
 </div>
</body>
</html>

批改老师:天蓬老师批改时间:2018-11-12 14:04:23
老师总结:下次提交的时候,附一张执行效果图. 还有,作业 ,可以只提交关键代码即可

发布手记

热门词条