选中所有复选框在第二次使用时不起作用

Question

我正在尝试创建一个复选框列表,其中包含All和None复选框.

单击这些复选框后,操作非常繁重,因此检查和取消选中过程不会导致每个子复选框上的单击事件至关重要!

这是我的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()中给出了非常好的解释.

工作小提琴

编辑:

第二个想法我喂你不需要None复选框看DEMO