返回 全选案例及其总...... 登陆

全选案例及其总结

草原上的星辰 2018-12-08 14:59:41 280
<!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循环的运用

最新手记推荐

• 用composer安装thinkphp框架的步骤 • 省市区接口说明 • 用thinkphp,后台新增栏目 • 管理员添加编辑删除 • 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消 回复 发送
  • PHP中文网