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

【问题标题】：Check all checkboxes doesn't work on second use检查所有复选框在第二次使用时不起作用
【发布时间】：2014-01-31 18:14:25
【问题描述】：

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

点击这些复选框时，操作相当繁重，因此检查和取消选中过程不会导致每个子复选框上的点击事件至关重要！

这是我的 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。

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

【问题讨论】：

标签： jquery checkbox

【解决方案1】：

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

例子

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

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

Working Fiddle

编辑：

再想我喂你不需要None复选框见DEMO

【讨论】：

【解决方案2】：

使用.prop()

$(document).ready(function () {
$('#AllCheckbox').click(function () {
    $('#NoneCheckbox').prop('checked',false);
    $('.TypeCheckbox').prop('checked', "checked");
});

$('#NoneCheckbox').click(function () {
    $('#AllCheckbox').prop('checked',false);
    $('.TypeCheckbox').prop('checked',false);
});

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

Demo

【讨论】：

【解决方案3】：

使用.prop()这里是演示链接http://jsfiddle.net/dhana36/7hsQ4/2/

【讨论】：

【解决方案4】：

你应该使用prop，而不是attr：

$('#AllCheckbox').click(function () {
  $('input:checkbox').prop('checked', 'checked');
});

$('#NoneCheckbox').click(function () {
  $('input:checkbox').removeAttr('checked');
});

【讨论】：