jQuery的設置所有複選框選中

Question

我使用jQuery 1.11.1，這是我的代碼：

$("#rowchkall").change(function(){ 
    if($(this).is(':checked')){ 
     $("input:checkbox[class=rowchk]").each(function() { 
      alert("set checked"); 
      $(this).attr('checked', "checked"); 
     }); 
    }else{ 
     $("input:checkbox[class=rowchk]").each(function() { 
      $(this).attr('checked', false); 
     }); 
    } 
}); 

當我第一次點擊#rowchkall，所有的複選框設置爲選中狀態。當我再次單擊它時，所有複選框都未選中。

當我再次點擊它時，警告框仍然出現，但沒有任何複選框將被選中。爲什麼它只是第一次工作？我該如何解決它？

謝謝。

Answer 1

使用.prop()，而不是.attr()

$(this).prop('checked', true); //true to check else false uncheck 

您的代碼可以簡化爲

$("#rowchkall").change(function() { 
    $("input:checkbox.rowchk").prop('checked',this.checked); 
}); 

一個良好的閱讀.prop() vs .attr()

Answer 2

嘗試使用.prop()，而不是.attr()

$("#rowchkall").change(function(){ 
    $("input:checkbox[class=rowchk]").prop('checked', this.checked); 
}); 

而且您不需要通過iterate來更改所有元素的屬性。

Answer 3

$("#rowchkall").change(function(){ 
    if($(this).is(':checked')){ 
     $("input.rowchk[type=checkbox]").each(function() { 
      alert("set checked"); 
      $(this).attr('checked',true); 
     }); 
    }else{ 
     $("input.rowchk[type=checkbox]").each(function() { 
      $(this).attr('checked', false); 
     }); 
    } 
});