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