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


4127

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

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

要么

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

这样的事情存在吗?


一个更具体(且非常有用!)的问题,“如何检查复选框中按值设置的项目?”,我想我们也可以在这里进行讨论,并在下面发布了答案。
彼得·克劳斯

在此处检查其他使用jQuery的方法stackoverflow.com/a/22019103/1868660
Subodh Ghulaxe 2014年

如果您需要触发onchange事件,它是$("#mycheckbox").click();
HumanInDisguise

“检查某些内容”建议您对其进行测试,因此我认为“使复选框处于选中状态”是一个更清晰,更好的标题。
Alireza 2015年

支柱(); 功能是完美的答案。参见函数定义-api.jquery.com/prop
yogihosting

Answers:


5967

现代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()方法代替此方法的好处是它们将对所有匹配的元素进行操作。

jQuery 1.5.x及以下

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

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

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

有关更多信息,checked可以在1.6版发行说明文档的“ 属性与属性”部分中找到有关从1.5.x到1.6过渡时属性/属性处理更改的一些不完整讨论。.prop()


26
@Xian删除了checked属性使得无法重置表格
mcgrailm 2011年

6
附带说明一下,jQuery 1.6.1应该解决了我提到的问题,因此我们可以从技术上重新使用$(...)。prop(...)
cwharris 2011年

19
“如果只使用一个元素,它将永远是最快的DOMElement.checked = true。” 但这可以忽略不计,因为它只是一个要素……
泰勒·克朗普顿

46
正如泰勒(Tyler)所说,这在性能上的改善微不足道。对我来说,使用通用API进行编码比混合本机API和jQuery API更具可读性。我会坚持使用jQuery。
查理·基利安

18
@TylerCrompton-当然,它不完全与性能有关,但是这样做$(element).prop('checked')完全是在浪费打字。 element.checked存在,应在已经拥有的情况下使用element
gnarf 2012年

704

采用:

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

如果要检查是否已选中复选框:

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

4
也$(selector).checked检查检查
eomeroff 2011年

6
我尝试了这个确切的代码,在全选/全选复选框需要检查和取消选中所有状态以及检查其状态的情况下,它对我不起作用。相反,我尝试了@Christopher Harris的答案,并且成功了。
JD史密斯

为什么使用“表单#mycheckbox”而不是简单的“ #mycheckbox”?id在整个文档中已经是唯一的,直接选择它更快,更简单。
YuriAlbuquerque 2013年

@YuriAlbuquerque就是一个例子。您可以使用所需的任何选择器。
bchhun

5
$(selector).checked不起作用。jQuery中没有“检查”方法。
布伦丹·伯德

318

这是检查和使用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;
});

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

4
@DanielXMoore,您正在解决这个问题。该示例表明,一旦用户单击了复选框,浏览器将不再响应checked属性更改,与更改属性的方法无关
cwharris 2012年

3
@ChristopherHarris好的,您是对的,我很想念。从jQuery 1.6开始,您不应该使用.prop方法吗?$('.myCheckBox').prop('checked', true)这样,它将自动应用于整个匹配元素集(仅当设置时,获取仍然只是第一个)
Daniel X Moore

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

@ChristopherHarris,我向插件添加了我需要的内容,以实现一些参数灵活性。无需类型转换,这使内联处理更加容易。来自不同数据库的Esp带有关于“真实”是什么的“想法”。小提琴:jsfiddle.net/Cyber​​jetx/vcp96
Joe Johnston

147

你可以做

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

要么

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

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

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

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

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

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

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

您还可以转到$(“#myTable input:checkbox”)。each(...);
克里斯·布兰德斯玛

您也可以去$(".myCheckbox").click()
RobertPitt

3
@Michah删除了checked属性,因此无法重置表格
mcgrailm 2011年

12
该答案已过期,因为它使用.attr代替.prop
Blazemonger,2014年

$("#mycheckbox").click();工作对我来说,因为我是听着变化事件也是一样,.attr.prop不火更改事件。
Damodar Bashyal

80

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


5
@ livfree75删除了checked属性使得无法重置表格
mcgrailm 2011年

5
该答案已过期,因为它使用.attr代替.prop
Blazemonger,2014年

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

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


4
顶级将失败...检查的不是jquery对象成员
redsquare

5
该答案已过期,因为它使用.attr代替.prop
Blazemonger,2014年

IMO该click事件在Firefox和Edge中不可靠。
Vahid Amiri

62

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

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

1
这是不准确的。将'checked'属性设置为' 至少不会取消选中chrome中的复选框。
cwharris

@xixonia我在发布您的小提琴之前做了测试,因为您没有更改左侧菜单以包含jquery,所以无法正常工作
mcgrailm 2011年

1
mcgralim-在1.6中甚至更容易.... $(".mycheckbox").prop("checked", true/false)
gnarf 2011年

2
@MarkAmery,您提到我的帖子在发布时没有添加任何内容,但这是准确的。如果查看接受答案的历史记录,您会发现他们建议删除该元素。这使得无法重置表单,这就是我最初发布的原因。
mcgrailm 2014年

1
@mcgrailm我已根据您的评论继续进行并修改了可接受的答案。如果您想看一下它并检查它在当前状态下是否看起来不错,我将不胜感激。我再次对提出尖锐的批评表示歉意,这种批评至少在某种程度上是高度误导的。
Mark Amery 2014年

51

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

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

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


46

假设问题是...

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

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

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

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

45

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

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

3
这不能回答问题(问题是关于设置是否选中复选框,而不是确定复选框是否选中)。这也是确定复选框是否已选中的一种非常丑陋的方式(一方面,您正在利用一种不言而喻的事实,当调用0个元素时,该事实.val()总是会undefined在检测到jQuery对象为空时返回,只需检查它即可.length)- 有关更多可读方法,请参见stackoverflow.com/questions/901712/…
Mark Amery 2014年

42

要使用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);

37

这是没有jQuery的一种方法

function addOrAttachListener(el, type, listener, useCapture) {
  if (el.addEventListener) {
    el.addEventListener(type, listener, useCapture);
  } else if (el.attachEvent) {
    el.attachEvent("on" + type, listener);
  }
};

addOrAttachListener(window, "load", function() {
  var cbElem = document.getElementById("cb");
  var rcbElem = document.getElementById("rcb");
  addOrAttachListener(cbElem, "click", function() {
    rcbElem.checked = cbElem.checked;
  }, false);
}, false);
<label>Click Me!
  <input id="cb" type="checkbox" />
</label>
<label>Reflection:
  <input id="rcb" type="checkbox" />
</label>


31

这是使用按钮进行选中和取消选中的代码:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
        });
        set=unset;
    });
});

更新:这是使用更新的Jquery 1.6+ prop方法的相同代码块,该方法替代了attr:

var set=1;
var unset=0;
jQuery( function() {
    $( '.checkAll' ).live('click', function() {
        $( '.cb-element' ).each(function () {
            if(set==1){ $( '.cb-element' ).prop('checked', true) unset=0; }
            if(set==0){ $( '.cb-element' ).prop('checked', false); unset=1; }
        });
        set=unset;
    });
});

4
该答案已过期,因为它使用.attr代替.prop
Blazemonger,2014年

30

尝试这个:

$('#checkboxid').get(0).checked = true;  //For checking

$('#checkboxid').get(0).checked = false; //For unchecking

29

我们可以使用elementObjectjQuery来检查属性:

$(objectElement).attr('checked');

我们可以将其用于所有jQuery版本,而不会出现任何错误。

更新:Jquery 1.6+具有新的prop方法,该方法取代了attr,例如:

$(objectElement).prop('checked');

2
该答案已过期,因为它使用.attr代替.prop
Blazemonger,2014年

25

如果您正在使用PhoneGap进行应用程序开发,并且要立即显示的按钮上有一个值,请记住要这样做

$('span.ui-[controlname]',$('[id]')).text("the value");

我发现没有跨度,无论您做什么,界面都不会更新。


25

这是有关如何检查多个复选框的代码和演示...

http://jsfiddle.net/tamilmani/z8TTt/

$("#check").on("click", function () {

    var chk = document.getElementById('check').checked;
    var arr = document.getElementsByTagName("input");

    if (chk) {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = true;
        }
    } else {
        for (var i in arr) {
            if (arr[i].name == 'check') arr[i].checked = false;
        }
    }
});

-1; 在我看来,将jQuery选择器$("#check")与原始DOM API调用混合使用document.getElementsByTagName("input")似乎不太明智,尤其是考虑到for可以通过使用来避免此处的循环.prop()。无论如何,这是又一个迟来的答案,没有增加任何新内容。
Mark Amery 2014年

20

另一个可能的解决方案:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }

19

正如@ livefree75所说:

jQuery 1.5.x及以下

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

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

但是在新版本的jQuery中,我们必须使用如下代码:

jQuery 1.6以上

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

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

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

18

如果使用移动设备并且您希望界面更新并将复选框显示为未选中,请使用以下命令:

$("#checkbox1").prop('checked', false).checkboxradio("refresh");

18

请注意,Internet Explorer 9之前的Internet Explorer中的内存泄漏,因为jQuery文档指出

在版本9之前的Internet Explorer中,如果不删除该属性(使用.removeProp( ))从文档中删除DOM元素之前。要在DOM对象上安全地设置值而不会导致内存泄漏,请使用.data()。


2
这是无关紧要的,因为所有(正确的)答案都使用.prop('checked',true)
Blazemonger,2014年

不确定我是否理解您的评论。jQuery文档中仍然存在。您是否暗示IE <9中没有内存泄漏?
2014年

2
还有在这种情况下没有内存泄漏,因为我们正在将其设置为一个简单的原始值(布尔值)。
Blazemonger 2014年

18

对于jQuery 1.6+

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

对于jQuery 1.5.x及以下版本

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

去检查,

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

17

选中和取消选中

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

3
-1; 这根本不会给已经thread肿的线程增加任何价值。此处的代码与接受的答案完全相同。
Mark Amery 2014年

16
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

4
-1是仅代码的答案,不直接回答问题,不添加其他答案尚未涵盖的内容。
Mark Amery 2014年

15

这可能是最短,最简单的解决方案:

$(".myCheckBox")[0].checked = true;

要么

$(".myCheckBox")[0].checked = false;

更短的是:

$(".myCheckBox")[0].checked = !0;
$(".myCheckBox")[0].checked = !1;

这也是一个jsFiddle


14

普通的JavaScript非常简单,并且开销更少:

var elements = document.getElementsByClassName('myCheckBox');
for(var i = 0; i < elements.length; i++)
{
    elements[i].checked = true;
}

这里的例子


@MarkAmery接受的答案并不涵盖没有jQuery时的操作方法。我的答案为已接受的答案增加了额外的好处。
Alex W

13

我不能使用它来工作:

$("#cb").prop('checked', 'true');
$("#cb").prop('checked', 'false');

正确和错误都会选中该复选框。对我有用的是:

$("#cb").prop('checked', 'true'); // For checking
$("#cb").prop('checked', '');     // For unchecking

16
它不应该是truefalse,不'true''false'
tpower 2012年

9
它“没有用”,因为它'false'被转换为布尔值,从而导致true-空字符串计算为false“起作用”。请参阅这个小提琴,以了解我的意思。
暗影巫师为您耳边

@ chris97ong我已经撤消了您的修改;当有人说“不要使用下面的代码,因为它不起作用”时,修正该代码,同时在注释中指出该代码不起作用,这是有害的-特别是当它破坏了注释中关于代码为何无效的解释时没有工作。话虽如此,由于tpower和ShadowWizard给出的原因,这个答案仍然有些困惑,值得一提。
Mark Amery 2014年

1
为布尔值使用true和false值,请勿使用“ true”或“ false”(字符串)。
Jone Polvora 2015年

13

当您选中类似的复选框时;

$('.className').attr('checked', 'checked')

这可能还不够。您还应该调用下面的函数;

$('.className').prop('checked', 'true')

特别是当您删除复选框选中属性时。


11

这是完整的答案 使用jQuery

我测试了它,并且100%:D

    // when the button (select_unit_button) is clicked it returns all the checed checkboxes values 
    $("#select_unit_button").on("click", function(e){

             var arr = [];

             $(':checkbox:checked').each(function(i){
                 arr[i] = $(this).val(); // u can get id or anything else
             });

              //console.log(arr); // u can test it using this in google chrome
    });

10

在jQuery中,

if($("#checkboxId").is(':checked')){
    alert("Checked");
}

要么

if($("#checkboxId").attr('checked')==true){
    alert("Checked");
}

在JavaScript中,

if (document.getElementById("checkboxID").checked){
    alert("Checked");
}

7
这不能回答问题。
塞缪尔·柳

2
该答案已过期,因为它使用.attr代替.prop
Blazemonger,2014年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.