手记 / 全选案例及其总结

全选案例及其总结

2天前6浏览0评论
<!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循环的运用

相关标签:JavaScript
    0推荐

      作者的热门手记

      PHP中文网

      未登录