jquery - 检查所有复选框在第二次使用时不起作用

Question

我正在尝试创建一个复选框列表，末尾带有“全部”和“无”复选框。

单击这些复选框时会执行相当繁重的操作，因此选中和取消选中过程不会导致每个子复选框上出现单击事件，这一点至关重要!

这是我的 JS:

$(document).ready(function(){
  $('#AllCheckbox').click(function(){                               
  $('#NoneCheckbox').removeAttr('checked');
  $('.TypeCheckbox').attr('checked', 'checked');                                        
});

$('#NoneCheckbox').click(function(){
  $('#AllCheckbox').removeAttr('checked');
  $('.TypeCheckbox').removeAttr('checked');                 
});

$('.TypeCheckbox').click(function(){
  alert('Type checkbox was clicked');
  $('#AllCheckbox').removeAttr('checked');
  $('#NoneCheckbox').removeAttr('checked');
  });
});

这是我的 html:

<label for="1Checkbox">1</label><input type="checkbox" ID="1Checkbox" class="TypeCheckbox" />
<label for="2Checkbox">2</label><input type="checkbox" ID="2Checkbox" class="TypeCheckbox" />
<label for="3Checkbox">3</label><input type="checkbox" ID="3Checkbox" class="TypeCheckbox" />
<label for="AllCheckbox">All</label><input type="checkbox" ID="AllCheckbox" />
<label for="NoneCheckbox">None</label><input type="checkbox" ID="NoneCheckbox" />

我创建了一个 JSFiddle .

如果您单击“全部”，效果很好，所有编号的复选框都会被选中。但是，再次单击“无”，然后再次单击“全部”，第二次不会选中编号的复选框。为什么不呢？

Answer 1

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

示例

$('.TypeCheckbox').prop('checked', true/false); 

我在.prop() vs .attr()给出了很好的解释。 一定要访问它。

<强> Working Fiddle

编辑:

再想一想，我不需要 None 复选框，请参阅 DEMO