开发者问题收集

使用 jQuery 将复选框设置为“已选中”

2009-01-08
3857875

我想使用 jQuery 来执行类似这样的操作来勾选 checkbox

$(".myCheckBox").checked(true);

$(".myCheckBox").selected(true);

这样的事存在吗?

3个回答

现代 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() 文档 属性与属性 部分中找到。

Xian
2009-01-08

使用:

$(".myCheckbox").attr('checked', true); // Deprecated
$(".myCheckbox").prop('checked', true);

如果您想检查复选框是否被选中:

$('.myCheckbox').is(':checked');
bchhun
2009-01-08

这是使用 jQuery 选中和取消选中复选框的正确方法,因为它是跨平台标准,并且 允许表单重新发布。

$('.myCheckBox').each(function(){ this.checked = true; });

$('.myCheckBox').each(function(){ this.checked = false; });

通过这样做,您正在使用 JavaScript 标准来选中和取消选中复选框,因此任何正确实现复选框元素的“checked”属性的浏览器都将完美地运行此代码。这 应该 是所有主流浏览器,但我无法测试 Internet Explorer 9 之前的版本。

问题 (jQuery 1.6):

一旦用户点击复选框,该复选框将停止响应“checked”属性的更改。

以下是复选框属性在有人 点击 复选框后无法执行工作的示例(这种情况发生在 Chrome 中)。

Fiddle

解决方案:

通过在 DOM 元素上使用 JavaScript 的“checked”属性,我们能够直接解决问题,而不必尝试操纵 DOM 来执行我们 希望 它执行的操作。

Fiddle

此插件将更改 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;
});
cwharris
2011-05-06