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() 上做了非常好的解释。访问它。

<强> Working Fiddle

编辑：

我想再次提示您不需要None复选框，请参阅DEMO

Answer 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

Answer 3

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

Answer 4

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

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

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

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

4 个答案: