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


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

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

要么

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

这样的事情存在吗?


3606
2018-01-08 22:20


起源


一个更具体(也非常有用!)的问题,“我如何检查复选框中的项目BY VALUE?”,我想我们也可以在这里讨论,我在下面发布了一个答案。 - Peter Krauss
在这里使用jQuery检查其他方法 stackoverflow.com/a/22019103/1868660 - Subodh Ghulaxe
如果您需要触发onchange事件,那就是 $("#mycheckbox").click(); - HumanInDisguise
“检查一些东西”建议测试它,所以我认为“勾选一个复选框”是一个更清晰,更好的标题。 - Alireza
支柱();功能是完美的答案。查看功能定义 - api.jquery.com/prop - yogihosting


答案:


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() 在任何包含它的形式 - 一个微妙但可能不受欢迎的行为改变。

对于更多的上下文,一些不完整的讨论的变化处理 checked 在1.5.x到1.6的过渡中的属性/属性可以在 版本1.6发行说明 和 属性与属性 部分 .prop() 文件

任何版本的jQuery

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

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

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


5409
2018-01-08 22:25



@Xian删除checked属性使得无法重置表单 - mcgrailm
作为旁注,jQuery 1.6.1应该修复我提到的问题,所以我们可以继续使用$(...)。prop(...) - cwharris
“如果您只使用一个元素,它将始终使用最快 DOMElement.checked = true“但它可以忽略不计,因为它只是一个元素...... - Tyler Crompton
正如泰勒所说,这是一个微不足道的改进。对我来说,使用通用API进行编码使其比混合本机API和jQuery API更具可读性。我坚持使用jQuery。 - Charlie Kilian
@TylerCrompton - 当然,它不完全是关于性能,而是在做 $(element).prop('checked')完全是浪费打字。 element.checked 存在,应该在你已经拥有的情况下使用 element - gnarf


使用:

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

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

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

624
2018-01-08 22:25



还检查了$(selector).checked to check - eomeroff
我尝试了这个确切的代码,如果选择all / select none复选框需要检查和取消选中所有以及检查其状态,它对我不起作用。相反,我尝试了@Christopher Harris的回答,这就是诀窍。 - JD Smith
为什么使用“form #mycheckbox”而不是简单的“#mycheckbox”? id在整个文档中已经是唯一的,直接选择它更快更简单。 - YuriAlbuquerque
@YuriAlbuquerque就是一个例子。你可以使用你想要的任何选择器。 - bchhun
$(选择器).checked不起作用。 jQuery中没有'checked'方法。 - Brendan Byrd


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

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

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

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

问题 (jQuery 1.6):

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

下面是一个复选框属性的示例,该属性在某人拥有后无法完成工作 点击 复选框(这在Chrome中发生)。

小提琴

解决方案:

通过使用JavaScript的“已检查”属性 DOM 我们能够直接解决问题,而不是试图操纵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;
});

284
2018-05-06 19:31



在你应该使用的第一个JSFiddle示例中 removeAttr('checked') 而不是 attr('checked', false) - Daniel X Moore
@DanielXMoore,你正在绕过这个问题。该示例显示,一旦用户单击了复选框,浏览器就不再响应 checked 属性变化, 而不管 用于更改它们的方法。 - cwharris
@ChristopherHarris好的,你是对的,我错过了。从jQuery 1.6开始,你不应该使用.prop方法吗?$('.myCheckBox').prop('checked', true) 这样它会自动应用于整个匹配元素集(仅在设置时,获取仍然只是第一个) - Daniel X Moore
是。 prop 绝对是在元素上设置属性的合适方法。 - cwharris
不错的小插件,谢谢!要保持可链接性,请在插件结束前添加“return this”。 - JD Smith


你可以做

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

要么

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

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

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

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

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

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

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

130
2018-01-08 22:24



你也可以去$(“#myTable input:checkbox”)。每个(...); - Chris Brandsma
你也可以去 $(".myCheckbox").click() - RobertPitt
@Michah删除checked属性使得无法重置表单 - mcgrailm
这个答案是过时的,因为它使用 .attr 代替 .prop。 - Blazemonger
$("#mycheckbox").click(); 我也在为我工作,因为我也在听改变事件 .attr & .prop 没有开火改变事件。 - Damodar Bashyal


您还可以使用新方法扩展$ .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()。


67
2017-08-20 18:19



@ livfree75删除checked属性使得无法重置表单 - mcgrailm
这个答案是过时的,因为它使用 .attr 代替 .prop。 - Blazemonger


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

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


58
2018-01-08 22:36



top one将失败... checked不是jquery对象成员 - redsquare
这个答案是过时的,因为它使用 .attr 代替 .prop。 - Blazemonger


要选中您应该使用的复选框

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

要么

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

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

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

如果你这样做

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

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

BAD DEMO 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');
    }
});

56
2018-03-23 15:22



这是不准确的。将'checked'属性设置为''将 不 取消选中至少chrome中的复选框。 - cwharris
@xixonia我在发布你的小提琴之前做过测试不起作用因为你没有改变左边的菜单来包含jquery - mcgrailm
mcgralim - 在1.6中它更容易.... $(".mycheckbox").prop("checked", true/false) - gnarf
@MarkAmery你提到我的帖子在发布时没有添加任何内容,但这是准确的。如果您查看已接受答案的历史记录,您会发现他们建议删除该元素。这使得无法重置表单,这就是我开始发布的原因。 - mcgrailm
@mcgrailm我已经开始根据你的评论修改了接受的答案。如果您想关注它并检查它在当前状态下看起来是否良好,我会很感激。我再次道歉,提出了至少部分被严重误导的尖锐批评。 - Mark Amery


假设问题是......

如何选中复选框 按价值?

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

西安的答案可以延伸到一个 更具体的选择器,使用以下代码行:

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

42
2018-06-24 11:33





我错过了解决方案。我将永远使用:

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

42
2017-09-20 11:43



这不回答问题(问题是关于 设置 是否选中复选框,而不是确定是否选中了复选框)。这也是一种非常丑陋的方式来确定是否选中了复选框(首先,你正在利用非显而易见的事实,即 .val() 永远都会回来 undefined 当调用0元素来检测jQuery对象为空时,你可以简单地检查它 .length 相反) - 见 stackoverflow.com/questions/901712/... 更可读的方法。 - Mark Amery


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

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

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


37
2018-03-14 09:40





使用选中复选框 jQuery 1.6 或更高只是这样做:

checkbox.prop('checked', true);

要取消选中,请使用:

checkbox.prop('checked', false);

以下是我喜欢使用jQuery切换复选框的内容:

checkbox.prop('checked', !checkbox.prop('checked'));

如果你正在使用 jQuery 1.5 或更低:

checkbox.attr('checked', true);

要取消选中,请使用:

checkbox.attr('checked', false);

36
2017-10-23 00:41