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

IT技术 javascript jquery checkbox selected checked
2020-12-13 16:23:30

我想做这样的事情来checkbox使用jQuery打勾

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

或者

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

这样的事情存在吗?

6个回答

现代jQuery

使用.prop()

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

DOM API

如果您只使用一个元素,则始终可以访问底层HTMLInputElement并修改其.checked属性:

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

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

jQuery 1.5.x 及以下

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

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

请注意,这是jQuery 1.6 版之前的单元测试使用的方法,并且最好使用,$('.myCheckbox').removeAttr('checked');因为如果最初选中该框,后者将更改对.reset()包含它的任何表单的调用行为- 一个微妙但可能的不受欢迎的行为改变。

有关更多上下文,checked可以在1.6 版发行说明文档Attributes vs. Properties部分中找到有关从 1.5.x 到 1.6 的过渡中对属性/属性处理的更改的一些不完整讨论.prop()

正如 Tyler 所说,这对性能的提升微乎其微。对我来说,使用通用 API 进行编码比混合原生 API 和 jQuery API 更具可读性。我会坚持使用 jQuery。
2021-02-08 16:23:30
“如果你只使用一种元素,那么使用它总是最快的DOMElement.checked = true”。但它可以忽略不计,因为它只是一个元素......
2021-02-11 16:23:30
@TylerCrompton - 当然,这并不完全与性能有关,但这样做$(element).prop('checked')完全是在浪费打字。 element.checked存在并且应该在您已经拥有的情况下使用element
2021-02-14 16:23:30
@Xian 删除了checked 属性使得无法重置表单
2021-02-15 16:23:30
作为旁注,jQuery 1.6.1 应该解决我提到的问题,所以我们可以在技术上仍然回到使用 $(...).prop(...)
2021-02-25 16:23:30

用:

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

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

$('.myCheckbox').is(':checked');
为什么使用“form #mycheckbox”而不是简单的“#mycheckbox”?id 在整个文档中已经是唯一的,直接取它更快更简单。
2021-02-18 16:23:30
$(selector).checked 不起作用。jQuery 中没有“已检查”方法。
2021-02-27 16:23:30
@YuriAlbuquerque 这是一个例子。你可以使用任何你想要的选择器。
2021-03-02 16:23:30
也 $(selector).checked to check 被选中
2021-03-05 16:23:30
我尝试了这个确切的代码,但在需要检查和取消选中所有以及检查其状态的全选/全选复选框的情况下,它对我不起作用。相反,我尝试了@Christopher Harris 的回答,结果成功了。
2021-03-07 16:23:30

这是检查和使用jQuery取消选中复选框的正确的方法,因为它是跨平台的标准,允许形式转播。

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

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

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

问题(jQuery 1.6):

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

这是在有人单击复选框后复选框属性无法完成工作的示例(这发生在 Chrome 中)。

小提琴

解决方案:

通过在DOM元素上使用 JavaScript 的“checked”属性,我们能够直接解决问题,而不是试图操纵 DOM 来做我们想要它做的事情。

小提琴

该插件将改变 jQuery 选择的任何元素的选中属性,并在所有情况下成功选中和取消选中复选框。因此,虽然这可能看起来像是一种霸道的解决方案,但它会让您网站的用户体验更好,并有助于防止用户感到沮丧。

(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;
});
@DanielXMoore,你在回避这个问题。该示例表明,一旦用户单击复选框,浏览器将不再响应checked属性更改,无论用于更改它们的方法如何
2021-02-07 16:23:30
在您的第一个 JSFiddle 示例中,您应该使用removeAttr('checked')而不是attr('checked', false)
2021-02-14 16:23:30
@ChristopherHarris 好吧,你说得对,我错过了。从 jQuery 1.6 开始,您不应该使用 .prop 方法吗?$('.myCheckBox').prop('checked', true)这样它会自动应用于整个匹配元素集(只有在设置时,获取仍然只是第一个)
2021-02-19 16:23:30
是的。prop绝对是在元素上设置属性的合适方法。
2021-02-26 16:23:30
@ChristopherHarris,我在插件中添加了我需要的东西,以允许一些参数灵活性。这使得内联处理更容易,无需类型转换。特别是来自不同数据库的“想法”关于“真实”是什么。小提琴:jsfiddle.net/Cyber​​jetx/vcp96
2021-03-03 16:23:30

你可以做

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

或者

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

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

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

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

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

您可以像这样选中所有复选框:

$(".myCheckbox").each(function(){
    $("#mycheckbox").click()
});
此答案已过时,因为它使用.attr代替.prop.
2021-02-07 16:23:30
你也可以去 $("#myTable input:checkbox").each(...);
2021-02-11 16:23:30
@Michah 删除了checked 属性使得无法重置表单
2021-02-11 16:23:30
$("#mycheckbox").click();工作对我来说,因为我是听着变化事件也是一样,.attr.prop不火更改事件。
2021-02-28 16:23:30
你也可以去 $(".myCheckbox").click()
2021-03-06 16:23:30

您还可以使用新方法扩展 $.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(),以防您使用其他使用这些名称的库。

此答案已过时,因为它使用.attr代替.prop.
2021-02-07 16:23:30
@livfree75 删除选中的属性使得无法重置表单
2021-02-16 16:23:30