获取全选框在于定义变量,通过label绑住复选框,再点击事件触发javascript函数,达到全选框

Original 2018-11-15 15:17:23 164
abstract:<!DOCTYPE html><html><head> <title>案例全选</title> <style type="text/css">   .box{    height:300px;    width:100px;   

<!DOCTYPE html>

<html>

<head>

<title>案例全选</title>

<style type="text/css">

   .box{

    height:300px;

    width:100px;

    border:1px solid #ccc;

    margin:20px auto;

    padding:15px 30px;

    text-align:center;

   }

   .box_1{

    margin-bottom:10px;

    border-bottom:1px solid #ccc;

    padding-bottom:30px;

   }

</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 class="box_1">

<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>


Correcting teacher:天蓬老师Correction time:2018-11-15 15:22:24
Teacher's summary:本例涉及事件添加,函数声明,以及根据name属性获取元素知识,写得很好

Release Notes

Popular Entries