javascript jQuery 检查和取消选中复选框只触发一次
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14680108/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery to check and uncheck checkboxes only fires once
提问by Gideon
I have a very simple requirement for my jQuery: to check a set of boxes if a radio button is checked, and to clear them all if another is checked.
我对我的 jQuery 有一个非常简单的要求：如果选中了一个单选按钮，则检查一组框，如果选中另一个，则清除它们。
The jquery works, however it only works once - that is if I click to check them all (all boxes check) and then click to clear them (all boxes clear), and then again click to check them all - there is no effect. Similarly if I manually uncheck some boxes then click to select all again, there is no effect.
jquery 可以工作，但是它只能工作一次——也就是说，如果我点击全部检查（选中所有框），然后单击清除它们（清除所有框），然后再次单击以全部检查它们——没有效果。同样，如果我手动取消选中某些框，然后再次单击以全选，则没有效果。
jQuery
jQuery
$('#all').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').attr('checked', false);
} else {
$('.country').attr('checked', true);
}
});
$('#none').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').attr('checked', true);
} else {
$('.country').attr('checked', false);
}
});
HTML
HTML
<div class="subselect">
<input type="radio" class="TLO" name="radio1" id="all" />Check All
<br />
<input type="radio" class="TLO" name="radio1" id="none" />Clear All
<br />
</div>
<br />
<br />
<div class="cselect" id="countries">
<input type="checkbox" class="country" />1
<br />
<input type="checkbox" class="country" />2
<br />
<input type="checkbox" class="country" />3
</div>
jsFiddlehttp://jsfiddle.net/vsGtF/1/
jsFiddle http://jsfiddle.net/vsGtF/1/
回答by j08691
Change your .attr()to .prop().
将您更改.attr()为.prop().
$('#all').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').prop('checked', false);
} else {
$('.country').prop('checked', true);
}
});
$('#none').on('change', function() {
if (!$(this).is(':checked')) {
$('.country').prop('checked', true);
} else {
$('.country').prop('checked', false);
}
});
You could also reduce this to just:
您也可以将其简化为：
$('#all').on('change', function () {
$('.country').prop('checked', $(this).is(':checked'));
});
$('#none').on('change', function () {
$('.country').prop('checked', !$(this).is(':checked'));
});
As the docs for .attr()state:
作为.attr()状态的文档：
As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
从 jQuery 1.6 开始，.attr() 方法为尚未设置的属性返回 undefined。要检索和更改 DOM 属性，例如表单元素的选中、选中或禁用状态，请使用 .prop() 方法。
回答by Mike Wells
I know that this has been duped alot on here but I did miss something, I had:
我知道这在这里被骗了很多，但我确实错过了一些东西，我有：
id = $(this).attr('id');
if($('#checkbox_' + id).prop('checked')){
$('#checkbox_' + id).attr('checked', false);
} else {
$('#checkbox_' + id).attr('checked', true);
}
And as mentioned above ALLcases of attr need swapping for prop()
如上所述，所有attr 情况都需要交换为 prop()
if($('#checkbox_' + id).prop('checked')){
$('#checkbox_' + id).prop('checked', false);
} else {
$('#checkbox_' + id).prop('checked', true);
}
Hope that helps somebody...
希望能帮助某人...
