jquery实现多选、全选、全不选

实现的效果    1.当点击1时,2、3也选中

         2.当1为不选中时,2、3也不被选中

         3.点击1后,2、3全选,然后将2设为不选中,1也不被选中。   当再次将2选中时,1也被选中

HTML      <input type="checkbox" name="allCheckBox" />

     <br/>

      <input type="checkbox" name="checkbox" />

       <input type="checkbox" name="checkbox" />

      <input type="checkbox" name="checkbox" />

JS

  

//判断全选 或者 全不选
$('input[name="allCheckBox"]').click(function(){
  if($(this).is(':checked')){
    $('input[name="checkbox"]').each(function(){
      //此处如果用attr,会出现第三次失效的情况
      $(this).prop("checked",true);
    });
  }else{
    $('input[name="checkbox"]').each(function(){
      $(this).removeAttr("checked",false);
    });
  }
});

//判断当全选时 若有一个不选 全选按钮为不选状态
$('input[name="checkbox"]').click(function(){
  var checkedLength = $("input[name='checkbox']:checked").length;
  var checkLength = $("input[name='checkbox']").length;
  if(checkLength == checkedLength){
      $("input[name='allCheckBox']").prop("checked",true);
      return true;
    }else{
      $("input[name='allCheckBox']").prop("checked",false);
      return true;
    }
})

原文地址:https://www.cnblogs.com/Yzzzzzzzzz/p/9403617.html