为 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.6 版发行说明.prop()属性与属性”部分,其中.prop()从 1.5.x 到 1.6 的过渡中对checked属性 / 属性处理的一些不完整讨论。 文件

采用:

$(".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;
});

你可以做

$('.myCheckbox').attr('checked',true) //Standards compliant

要么

$("form #mycheckbox").attr('checked', true)

如果您要触发的复选框的 onclick 事件中包含自定义代码,请改用以下代码:

$("#mycheckbox").click();

您可以通过完全删除属性来取消选中:

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

您可以选中所有复选框,如下所示:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});

您还可以使用新方法扩展 $ .fn 对象:

(function($)  {
   $.fn.extend({
      check : function()  {
         return this.filter(":radio, :checkbox").attr("checked", true);
      },
      uncheck : function()  {
         return this.filter(":radio, :checkbox").removeAttr("checked");
      }
   });
}(jQuery));

然后,您可以执行以下操作:

$(":checkbox").check();
$(":checkbox").uncheck();

或者,如果您使用其他使用这些名称的库,则可能要给它们提供更多独特的名称,例如 mycheck()和 myuncheck()。

$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

最后一个事件将触发该复选框的 click 事件,其他事件则不会。因此,如果您要触发的复选框的 onclick 事件中包含自定义代码,请使用最后一个。

要选中一个复选框,您应该使用

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

要么

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

并取消选中复选框,则应始终将其设置为 false:

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

如果你这样做

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

它将所有属性一起删除,因此您将无法重置表单。

不良演示 jQuery 1.6 。我认为这是坏的。对于 1.6,我将对此发表新文章。

新的工作演示 jQuery 1.5.2可在 Chrome 中使用。

两个演示都使用

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

这将选择具有指定属性且其值包含给定子字符串 “ckbItem” 的元素:

$('input[name *= ckbItem]').prop('checked', true);

它将选择其 name 属性中包含 ckbItem 的所有元素。

假设问题是...

如何检查 “按值” 复选框设置

请记住,在典型的复选框集中,所有输入标签都具有相同的名称, 但它们的属性value不同 :该组的每个输入都没有 ID。

可以使用以下代码行,使用更具体的选择器扩展 Xian 的答案:

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);

我错过了解决方案。我将始终使用:

if ($('#myCheckBox:checked').val() !== undefined)
{
    //Checked
}
else
{
    //Not checked
}