使用jQuery设置复选框的“checked”属性

Question

我想使用 jQuery 实现以下操作：选中一个 checkbox：

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

或者

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

有这样的东西吗？

- tpower

---

在这里检查使用jQuery的其他方法：https://dev59.com/xHE95IYBdhLWcg3wrP6w#22019103 - Subodh Ghulaxe

如果您需要触发onchange事件，则为$("#mycheckbox").click();。 - HumanInDisguise

“Checking something” 暗示着测试它，因此我认为“使复选框被选中”是一个更清晰和更好的标题。 - Alireza

prop()函数是完美的答案。请查看函数定义 - http://api.jquery.com/prop/ - yogihosting

attr()在IE中不起作用。使用prop()是最好的选择。 - divine

Answer 1

现代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()文档的属性 vs. 属性部分中关于从1.5.x到1.6处理checked属性/属性的不完整讨论。

- Xian

---

取消选中属性会使重置表单变得不可能。 - mcgrailm

顺便提一下，jQuery 1.6.1 应该已经修复了我提到的问题，因此我们实际上仍然可以回到使用 $(...).prop(...)。 - cwharris

如果您只是处理一个元素，使用 DOMElement.checked = true 的速度将始终最快。但由于只有一个元素，所以差异可以忽略不计。 - Tyler Crompton

正如Tyler所说的，这只是性能上微不足道的改进。对我来说，使用通用API编码比混合本机API和jQuery API更易读。我会坚持使用jQuery。 - Katie Kilian

当然，这并不完全关乎性能，但使用 $(element).prop('checked') 确实很浪费时间。如果你已有 element，就应该使用 element.checked。 - gnarf

Answer 2

用法：

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

如果你想要检查一个复选框是否被选中：

$('.myCheckbox').is(':checked');

- Bernard Chhun

---

也可以使用 $(selector).checked 来检查是否已选中。 - eomeroff

我尝试了这段代码，但在需要全选/全不选复选框来检查和取消选择所有内容以及检查它们的状态时，它对我没有起作用。相反，我尝试了 @Christopher Harris 的答案，那个可行。 - JD Smith

为什么要使用 "form #mycheckbox" 而不是简单的 "#mycheckbox"？id 在整个文档中已经是唯一的了，直接选择它会更快更简单。 - YuriAlbuquerque

@YuriAlbuquerque 这只是一个例子，您可以使用任何选择器。 - bchhun

$(selector).checked不起作用。在jQuery中没有'checked'方法。 - SineSwiper

@BrendanByrd DOM对象上有一个checked属性（没有jQuery包装） - bchhun

Answer 3

这是使用jQuery检查和取消选中复选框的正确方式，它是跨平台标准，并且将允许表单重新提交。

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

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

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

问题（jQuery 1.6）：

一旦用户单击复选框，该复选框就停止响应"checked"属性更改。

以下是复选框属性在某人单击复选框后未能正常工作的示例（在Chrome中发生）。 Fiddle 解决方案：

通过使用JavaScript的DOM元素上的"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

---

在你的第一个 JSFiddle 示例中，你应该使用 removeAttr('checked') 而不是 attr('checked', false)。 - Daniel X Moore

@DanielXMoore，你在绕着问题打转。这个例子是为了说明一旦用户点击复选框后，无论使用什么方法更改checked属性，浏览器都不再响应更改。 - cwharris

好的，我明白了。根据jQuery 1.6版本，您应该使用.prop方法，而不是之前提到的.attr方法。 $('.myCheckBox').prop('checked', true)这样设置后，它将自动应用于所有匹配的元素集（只适用于设置，获取仍然只返回第一个）。 - Daniel X Moore

是的，prop 绝对是在元素上设置属性的适当方式。 - cwharris

@ChristopherHarris，我已经添加了插件所需的内容，以允许一些参数的灵活性。这使得内联处理更加容易，无需进行类型转换。特别是来自具有关于“真实”含义的不同数据库的情况。Fiddle：http://jsfiddle.net/Cyberjetx/vcp96/ - Joe Johnston

@JoeJohnston 在完美的世界中，这不应该被构建到插件中。相反，在使用插件之前，它应该被转换为真/假值。怎么能说数据库不认为“0”是真的呢？这完全取决于数据库。 - cwharris

Answer 4

你可以这样做。

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

或者

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

如果您在复选框的 onclick 事件中有自定义代码需要触发，请改用以下代码：

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

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

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

你可以这样检查所有复选框：

您可以这样检查所有复选框：

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

- Micah

---

$("#myTable input:checkbox").each(...); 可以执行。 - Chris Brandsma

你也可以输入 $(".myCheckbox").click()。 - RobertPitt

移除"checked"属性会使重置表单变得不可能。 - mcgrailm

这个答案已经过时，因为它使用了 .attr 而不是 .prop。 - Blazemonger

$("#mycheckbox").click(); 对我很有用，因为我同时监听了change事件，而.attr和.prop不会触发change事件。 - Damodar Bashyal

Answer 5

你也可以通过扩展$.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()，以防您使用其他使用这些名称的库。

- livefree75

---

去掉 "checked" 属性会使重置表单变得不可能。 - mcgrailm

这个回答已经过时了，因为它使用的是 .attr 而不是 .prop。 - Blazemonger

Answer 6

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

最后一个会触发复选框的点击事件，其他的不会触发。 因此，如果您希望触发复选框的自定义onclick事件，请使用最后一个。

- Chris Brandsma

---

最高的那个会失败...checked 不是 jQuery 对象成员。 - redsquare

这个答案已经过时，因为它使用的是 .attr 而不是 .prop。 - Blazemonger

在我看来，click事件在Firefox和Edge浏览器中不太可靠。 - Vahid Amiri

Answer 7

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

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

- mcgrailm

---

这是不准确的。在至少Chrome中，将“checked”属性设置为“”将不会取消选中复选框。 - cwharris

mcgralim - 在1.6版本中，这更加容易了... $(".mycheckbox").prop("checked", true/false) - gnarf

@Blazemonger 你的意思是你使用.prop而不是.attr吗？ - mcgrailm

@MarkAmery 你说我发的帖子当时没有任何添加，但这是不准确的。如果你查看已接受答案的历史记录，你会发现他们建议删除该元素。这使得重置表单变得不可能，这也是我之前发帖的原因。 - mcgrailm

@mcgrailm，鉴于您的评论，我已经修改了被接受的答案。如果您想看一下并检查它在当前状态下是否看起来不错，我会很感激。再次对我提出尖锐批评表示歉意，至少在某种程度上是极其错误的。 - Mark Amery

Answer 8

这个选择器会选取具有特定属性的元素，且该属性值包含给定的子字符串 "ckbItem":

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

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

- Abou-Emish

Answer 9

假设问题是如何通过值来检查一个复选框集合？

如何按值检查复选框集合？

请记住，在典型的复选框集中，所有输入标签都具有相同的名称，它们通过属性value不同：没有每个集合输入的ID。

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

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

- Peter Krauss

Answer 10

我缺少解决方案。我总是使用：

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

- Overbeeke

---

这并没有回答问题（问题是关于设置复选框是否被选中，而不是确定复选框是否被选中）。这也是一种相当丑陋的确定复选框是否被选中的方式（首先，您正在利用非自明的事实，即当在0个元素上调用.val()时，它将始终返回undefined，以检测jQuery对象是否为空，而您可以简单地检查其.length）。请参见https://dev59.com/WHNA5IYBdhLWcg3wmfAa，了解更易读的方法。 - Mark Amery