全选事件小案例

原创 2019-02-16 16:51:36 240
摘要:<!DOCTYPE html><html><head> <title>使用js全选</title> <style type="text/css">   .box{    height: 250px;    width: 150px;  &

<!DOCTYPE html>

<html>

<head>

<title>使用js全选</title>

<style type="text/css">

   .box{

    height: 250px;

    width: 150px;

    border: 1px solid #ccc;

    margin: 20px auto;


     }

     .box div{

      border-bottom:1px solid #ccc;

      margin: 10px 0px;

     }

     .box input{

      margin: 7px 5px;

     }

</style>

</head>

<body>


<script type="text/javascript">


 function cc(){

  var ck,itm;

  ck=document.getElementById('ckeckall');

  itm=document.getElementsByName("item[]");

  for(var i=0;i<itm.length;i++){

  if (ck.checked) {

  itm[i].checked=true;

  }else{

  itm[i].checked=false;

  }

  }

 

 }

</script>

<div class="box">

<div>

<input type="checkbox" id="ckeckall" onclick="cc()"><label for="checkball">全选</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>


批改老师:灭绝师太批改时间:2019-02-16 17:44:31
老师总结:全选案例的使用场景较多,需要好好掌握,理解每一条语句的作用

发布手记

热门词条