使用 jQuery 将复选框设置为“已选中”
我想使用
jQuery
来执行类似这样的操作来勾选
checkbox
:
$(".myCheckBox").checked(true);
或
$(".myCheckBox").selected(true);
这样的事存在吗?
现代 jQuery
使用
.prop()
:
$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);
DOM API
如果您只处理一个元素,您始终可以访问底层
HTMLInputElement
并修改其
.checked
属性:
$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;
使用
.prop()
的好处和
.attr()
方法而不是这个,因为它们将对所有匹配的元素进行操作。
jQuery 1.5.x 及以下版本
.prop()
方法不可用,因此您需要使用
.attr()
。
$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);
请注意,这是
jQuery 1.6 版之前的单元测试使用的方法
,并且比使用
$('.myCheckbox').removeAttr('checked');
更好,因为如果该框最初被选中,后者将改变在任何包含
.reset()
的表单上调用它 - 这是一个微妙但可能不受欢迎的行为变化。
有关更多上下文,有关从 1.5.x 到 1.6 的过渡中对
checked
属性/属性的处理更改的一些不完整讨论,可在
版本 1.6 发行说明
和
.prop()
文档
的
属性与属性
部分中找到。
使用:
$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);
如果您想检查复选框是否被选中:
$('.myCheckbox').is(':checked');
这是使用 jQuery 选中和取消选中复选框的正确方法,因为它是跨平台标准,并且 将 允许表单重新发布。
$('.myCheckBox').each(function(){ this.checked = true; });
$('.myCheckBox').each(function(){ this.checked = false; });
通过这样做,您正在使用 JavaScript 标准来选中和取消选中复选框,因此任何正确实现复选框元素的“checked”属性的浏览器都将完美地运行此代码。这 应该 是所有主流浏览器,但我无法测试 Internet Explorer 9 之前的版本。
问题 (jQuery 1.6):
一旦用户点击复选框,该复选框将停止响应“checked”属性的更改。
以下是复选框属性在有人 点击 复选框后无法执行工作的示例(这种情况发生在 Chrome 中)。
解决方案:
通过在 DOM 元素上使用 JavaScript 的“checked”属性,我们能够直接解决问题,而不必尝试操纵 DOM 来执行我们 希望 它执行的操作。
此插件将更改 jQuery 选择的任何元素的 checked 属性,并在所有情况下成功选中和取消选中复选框。因此,虽然这似乎是一个过度的解决方案,但它将改善您网站的用户体验,并有助于防止用户感到沮丧。
(function( $ ) {
$.fn.checked = function(value) {
if(value === true || value === false) {
// Set the value of the checkbox
$(this).each(function(){ this.checked = value; });
}
else if(value === undefined || value === 'toggle') {
// Toggle the checkbox
$(this).each(function(){ this.checked = !this.checked; });
}
return this;
};
})( jQuery );
或者,如果您不想使用插件,您可以使用以下代码片段:
// Check
$(':checkbox').prop('checked', true);
// Un-check
$(':checkbox').prop('checked', false);
// Toggle
$(':checkbox').prop('checked', function (i, value) {
return !value;
});