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;
　　　　}
})