案例5:全选和反选

<script>
  $(function(){
    //  方式一:
    $("#allCheck").change(function(){
    if($(this).prop("checked")==true){
      $(".check").each(function(){
        $(this).prop("checked",true);
      })
    }else{
      $(".check").each(function(){
        $(this).prop("checked",false);
      })
    }
 
    //   方式二:   
    $(".check").prop("checked",$(this).prop("checked"));  //   把子元素的所有选框设置为和全选框一样的值
  })
})
</script>
</head>
<body>
<div>
  <input type="checkbox" id="allCheck" value="全选">全选
</div>
<ul>
  <li><input type="checkbox" class="check" id="">例1</li>
  <li><input type="checkbox" class="check" id="">例2</li>
  <li><input type="checkbox" class="check" id="">例3</li>
  <li><input type="checkbox" class="check" id="">例4</li>
</ul>
</body>
posted @ 2019-08-11 21:15  晴天宝宝i  阅读(137)  评论(0编辑  收藏  举报