全选啊 全选啊

原创 2018-10-19 15:13:13 228
摘要: <!DOCTYPE html>  <html>  <head>     <meta charset="utf-8">   <title>全选</title>   <style ty
 <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8">
 	<title>全选</title>
 	<style type="text/css">
      .box{width: 120px;height: 200px;border: 2px solid #000; border-radius:5px;margin: 0px auto;padding: 10px;}
      .box div{border-bottom: 2px solid #000;padding-bottom: 10px;}
      .box input{margin: 8px;}
 	</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 class="box">
  <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>


发布手记

热门词条