全选案例及其总结

原创 2018-12-08 14:59:41 22
摘要:<!DOCTYPE html> <html > <head>          <meta charset="UTF-8">        &
<!DOCTYPE html>
<html >
<head>
         <meta charset="UTF-8">
         <title>全选案例</title>
         <style type="text/css">
                  .box{width:120px;height: 250px;border: 1px solid #000;padding: 5px 10px;margin: 20px auto;border-radius: 5px;}
                  .box div{border-bottom: 1px solid #000;padding-bottom: 10px; margin-bottom:10px;}
                  .box input{margin:10px;}
         </style>
         <script type="text/javascript">
                  function checkAll(){
                          var checkall,item;
                          checkall=document.getElementById('checkall');//获取全选框
                           item=document.getElementsByName("item[]");//获取下面的勾选框
                          for (var i = 0;i<item.length; i++) {
                                   if(checkall.checked){
                                            item[i].checked=true;
                                   }else{
                                            item[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>

总结

通过id 和标签名对Html元素的查找

if语句及for循环的运用

批改老师:Peter-Zhu批改时间:2018-12-08 17:32:05
老师总结:全选 在web开发过程中, 非常常用 , 全选, 全不选 ,可以极大的方便用户操作,提升用户体验,但也有一定的风险,一定要注意

发布手记

热门词条