js一个奇怪的问题

Question

我想为页面提供一个全选的功能，于是写了一个jquery.$('#selectAll').click(function(){if(this.checked){$('.select').each(function(){$(this).attr('checked',true);});console.log('true');}else{$('.select').each(function(){$(this).removeAttr('checked');});console.log('false');}});我在页面运行，元素的checked属性在变化，但是页面就是不渲染效果打钩和不打勾，只有刚载入是页面时执行一次。

Answer 1

使用prop而非attr
$("#selectAll").on("click",function(){
if($(this).prop("checked")){
$("input[type='checkbox']:not(#selectAll)").prop("checked",true);
console.log('true');
}
else{
$("input[type='checkbox']:not(#selectAll)").prop("checked",false);
console.log('false');
}
})
                            

Answer 2

$("#selectAll").click(function(){
$("input[type='checkbox']:not(#selectAll)").attr("checked",$(this).attr("checked")=='checked')
})