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

我想做这样的事情来使用jQuery勾选一个checkbox ：

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

要么

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

这样的事情存在吗？

jQuery 1.6+

使用新的.prop()方法：

$('.myCheckbox').prop('checked', true);
$('.myCheckbox').prop('checked', false);

jQuery 1.5.x 及以下版本

.prop()方法不可用，因此您需要使用.attr() 。

$('.myCheckbox').attr('checked', true);
$('.myCheckbox').attr('checked', false);

请注意，这是jQuery 在 1.6 版之前的单元测试所使用的方法，并且优于使用

$('.myCheckbox').removeAttr('checked');

因为后者将在最初检查该框时，在包含它的任何表单上更改对.reset()的调用行为 - 一个微妙但可能不受欢迎的行为更改。

有关更多上下文，可以在版本 1.6 发行说明和.prop()的属性与属性部分中找到对从 1.5.x 过渡到 1.6 的已checked属性 / 属性的处理更改的一些不完整的讨论。文件。

任何版本的 jQuery

如果您只使用一个元素，则可以随时修改HTMLInputElement的.checked属性：

$('.myCheckbox')[0].checked = true;
$('.myCheckbox')[0].checked = false;

使用.prop()和.attr()方法而不是使用它的好处是它们将对所有匹配的元素进行操作。

使用：

$(".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 标准来检查和取消选中复选框，因此任何正确实现 checkbox 元素的 “checked” 属性的浏览器都将完美地运行此代码。这应该是所有主流浏览器，但我无法测试以前的 Internet Explorer 9。

问题（jQuery 1.6）：

用户单击复选框后，该复选框将停止响应 “已检查” 属性更改。

下面是一个复选框属性在某人点击了复选框后无法完成工作的示例（这种情况发生在 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;
});

协慌网