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

Setting "checked" for a checkbox with jQuery

提问人:tpower 提问时间:1/9/2009 最后编辑:Peter Mortensentpower 更新时间:8/2/2023 访问量:3817547

问:

我想做这样的事情来勾选使用jQuerycheckbox

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

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

这样的事情存在吗?

选中 JavaScript jQuery 复选框

评论

0赞 Peter Krauss 3/9/2012
一个更具体(也非常有用)的问题,“我如何按值检查复选框集中的项目?”,我想我们也可以在这里讨论,我在下面发布了一个答案。
0赞 Subodh Ghulaxe 2/25/2014
在此处查看使用 jQuery 执行此操作的其他方法 stackoverflow.com/a/22019103/1868660
0赞 HumanInDisguise 5/11/2015
如果需要触发 onchange 事件,则$("#mycheckbox").click();
0赞 Alireza 5/13/2015
“检查某些内容”建议对其进行测试,所以我认为“选中复选框”是一个更清晰、更好的标题。
0赞 yogihosting 5/23/2016
prop();功能是完美的答案。请参阅函数定义 - api.jquery.com/prop

答:

166赞 Micah 1/9/2009 #1

你可以做

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

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

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

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

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

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

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

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

评论

0赞 Chris Brandsma 1/9/2009
你也可以去 $(“#myTable input:checkbox”).each(...);
0赞 RobertPitt 9/20/2010
你也可以去$(".myCheckbox").click()
3赞 mcgrailm 3/23/2011
@Michah删除 checked 属性会导致无法重置窗体
12赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
0赞 Damodar Bashyal 5/1/2017
$("#mycheckbox").click();对我有用,因为我也在听更改事件,并且没有触发更改事件。.attr.prop
6418赞 Xian 1/9/2009 #2

现代 jQuery

使用 .prop()

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

DOM API

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

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

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

jQuery 1.5.x 及更低版本

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

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

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

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

评论

29赞 mcgrailm 3/23/2011
@Xian删除 checked 属性会导致无法重置表单
6赞 cwharris 5/14/2011
顺便说一句,jQuery 1.6.1 应该修复我提到的问题,因此我们仍然可以回到使用 $(...)。道具(...)
19赞 Tyler Crompton 3/30/2012
“如果你只使用一个元素,那么使用起来总是最快的”。但它可以忽略不计,因为它只是一个元素......DOMElement.checked = true
50赞 Katie Kilian 5/5/2012
正如 Tyler 所说,性能上的改进可以忽略不计。对我来说,使用通用 API 进行编码比混合使用本机 API 和 jQuery API 更具可读性。我会坚持使用jQuery。
19赞 gnarf 10/2/2012
@TylerCrompton - 当然,这并不完全与性能有关,但这样做完全是打字的浪费。 存在,并且应该在您已经拥有的情况下使用$(element).prop('checked')element.checkedelement
779赞 bchhun 1/9/2009 #3

用:

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

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

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

评论

4赞 eomeroff 5/3/2011
此外,$(selector).checked to check 被选中
6赞 JD Smith 3/28/2013
我尝试了这个确切的代码,但在全选/全选复选框需要检查和取消选中所有以及检查其状态的情况下,它对我不起作用。相反,我尝试@Christopher哈里斯的答案,这成功了。
0赞 YuriAlbuquerque 10/11/2013
为什么要使用“#mycheckbox 形式”而不是简单的“#mycheckbox”?id在整个文档中已经是唯一的,直接选择它更快更简单。
0赞 bchhun 10/13/2013
@YuriAlbuquerque这是一个例子。您可以使用任何您想要的选择器。
6赞 SineSwiper 10/8/2015
$(selector).checked 不起作用。jQuery中没有“checked”方法。
70赞 Chris Brandsma 1/9/2009 #4
$("#mycheckbox")[0].checked = true;
$("#mycheckbox").attr('checked', true);
$("#mycheckbox").click();

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

评论

4赞 redsquare 1/9/2009
前一个会失败......checked 不是 jQuery 对象成员
5赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
0赞 Vahid Amiri 8/31/2019
IMO 该事件在 Firefox 和 Edge 中不可靠。click
87赞 livefree75 8/21/2010 #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(),以防您使用使用这些名称的其他库。

评论

5赞 mcgrailm 3/23/2011
@livfree75删除 checked 属性会导致无法重置窗体
5赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
56赞 Abou-Emish 9/20/2010 #6

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

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

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

65赞 mcgrailm 3/23/2011 #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');
    }
});

评论

1赞 cwharris 5/6/2011
这是不准确的。将“checked”属性设置为“”至少不会在 chrome 中取消选中复选框。
0赞 mcgrailm 5/7/2011
@xixonia我在发布之前进行了测试,您的小提琴不起作用,因为您没有更改左侧的菜单以包含 jquery
1赞 gnarf 5/7/2011
McGlarim - 在 1.6 中它甚至更容易......$(".mycheckbox").prop("checked", true/false)
2赞 mcgrailm 12/15/2014
@MarkAmery你提到我的帖子在发布时没有添加任何内容,但这是准确的。如果你查看已接受答案的历史记录,你会发现他们建议删除该元素。这使得重置表单变得不可能,这就是我开始发帖的原因。
1赞 Mark Amery 12/16/2014
@mcgrailm 我已经根据您的评论修改了已接受的答案。如果您想关注它并检查它在当前状态下看起来是否良好,我将不胜感激。我再次为提出尖锐的批评而道歉,这些批评至少在一定程度上是高度误导的。
355赞 cwharris 5/7/2011 #8

这是使用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赞 Daniel X Moore 1/30/2012
在你的第一个 JSFiddle 示例中,你应该使用而不是removeAttr('checked')attr('checked', false)
4赞 cwharris 1/30/2012
@DanielXMoore,你正在回避这个问题。该示例旨在显示,一旦用户单击了复选框,浏览器将不再响应属性更改,无论使用何种方法更改属性更改。checked
4赞 Daniel X Moore 2/2/2012
@ChristopherHarris 好吧,你是对的,我错过了。从 jQuery 1.6 开始,您不应该使用 .prop 方法吗?这样,它将自动应用于整个匹配元素集(仅在设置时,获取仍然只是第一个)$('.myCheckBox').prop('checked', true)
0赞 cwharris 2/2/2012
是的。 绝对是在元素上设置属性的适当方法。prop
0赞 Joe Johnston 3/4/2014
@ChristopherHarris,我已经将我需要的东西添加到插件中,以允许一些参数灵活性。这使得内联处理更容易,而无需类型转换。特别是来自不同的数据库,其中包含关于什么是“真实”的“想法”。小提琴:jsfiddle.net/Cyberjetx/vcp96
31赞 Prasanth P 6/24/2011 #9

我们可以与jQuery一起使用来检查属性:elementObject

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

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

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

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

评论

2赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
34赞 starjahid 10/25/2011 #10

以下是使用按钮选中和取消选中的代码:

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赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
14赞 fredcrs 1/5/2012 #11

我无法使用以下命令让它工作:

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

true 和 false 都会选中该复选框。对我有用的是:

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

评论

16赞 tpower 1/5/2012
不应该是 和 不是 和 吗?truefalse'true''false'
9赞 Shadow Wizard Love Zelda 6/24/2012
它“不起作用”,因为被转换为布尔值,导致 - 空字符串计算结果为它“有效”。请看这个小提琴的例子,看看我的意思。'false'truefalse
0赞 Mark Amery 12/16/2014
@chris97ong我已经回滚了你的编辑;当有人说“不要使用下面的代码,因为它不起作用”时,在发表评论说它不起作用的同时修复该代码是有害的 - 尤其是当它破坏了评论中对代码不起作用的原因的解释时。也就是说,这个答案仍然有些混乱,由于 tpower 和 ShadowWizard 给出的原因,值得投反对票。
1赞 Jone Polvora 2/22/2015
布尔值使用 true 和 false 值,不要使用“true”或“false”(字符串)。
51赞 5 revs, 3 users 74%Peter Krauss #12

假设问题是......

如何选中按值设置的复选框

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

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

$("input.myclass[name='myname'][value='the_value']").prop("checked", true);
28赞 Clement Ho 4/17/2012 #13

如果您使用 PhoneGap 进行应用程序开发,并且按钮上有一个要立即显示的值,请记住执行此操作

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

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

48赞 Overbeeke 6/24/2012 #14

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

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

评论

3赞 Mark Amery 12/15/2014
这并不能回答问题(问题是关于设置是否选中复选框,而不是确定是否选中复选框)。这也是确定复选框是否被选中的一种非常丑陋的方法(首先,您正在利用一个不言自明的事实,该事实在调用 0 个元素时总是返回,以检测 jQuery 对象是否为空,而您可以简单地检查它) - 请参阅 stackoverflow.com/questions/901712/...,了解更具可读性的方法。.val()undefined.length
33赞 prashanth 9/10/2012 #15

试试这个:

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

$('#checkboxid').get(0).checked = false; //For unchecking
40赞 Xitalogy 10/23/2012 #16

这是一种无需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>

19赞 Matt Peacock 1/11/2013 #17

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

$("#checkbox1").prop('checked', false).checkboxradio("refresh");
12赞 user1477929 2/27/2013 #18

这是使用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
    });
45赞 Ramon de Jesus 3/14/2013 #19

要使用 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);
9赞 mathew 5/13/2013 #20
$(".myCheckBox").prop("checked","checked");

评论

2赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
18赞 naor 5/22/2013 #21

请注意 Internet Explorer 9 之前的 Internet Explorer 中的内存泄漏,如 jQuery 文档所述

在版本 9 之前的 Internet Explorer 中,使用 .prop() 设置 DOM element 属性设置为除简单基元值以外的任何内容 (number、string 或 boolean) 如果属性为 在删除 DOM 元素之前未删除(使用 .removeProp()) 从文档。在没有内存的情况下安全地设置DOM对象的值 泄漏,请使用 .data()。

评论

2赞 Blazemonger 1/21/2014
这是无关紧要的,因为所有(正确)答案都使用 ..prop('checked',true)
0赞 naor 1/22/2014
不确定我是否理解你的评论。这在jQuery文档中仍然存在。你是在暗示IE < 9中没有内存泄漏吗?
2赞 Blazemonger 1/22/2014
在这种情况下没有内存泄漏,因为我们将其设置为一个简单的基元值(布尔值)。
11赞 ijarlax 6/10/2013 #22

在jQuery中,

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

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

在 JavaScript 中,

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

评论

7赞 Samuel Liew 6/10/2013
这并不能回答这个问题。
2赞 Blazemonger 1/21/2014
此答案已过时,因为它使用 而不是 ..attr.prop
17赞 mahmoh 7/16/2013 #23
$('controlCheckBox').click(function(){
    var temp = $(this).prop('checked');
    $('controlledCheckBoxes').prop('checked', temp);
});

评论

4赞 Mark Amery 12/16/2014
-1 表示仅代码答案,不直接回答问题,并且不添加其他答案尚未涵盖的内容。
27赞 tamilmani 8/16/2013 #24

以下是如何选中多个复选框的代码和演示...

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;
        }
    }
});

评论

0赞 Mark Amery 12/16/2014
-​1;将 jQuery 选择器与原始 DOM API 调用混合在一起对我来说似乎不优雅,特别是考虑到这里的循环可以通过使用 .无论如何,这是另一个迟到的答案,没有增加任何新内容。$("#check")document.getElementsByTagName("input")for.prop()
-6赞 eggshot 9/13/2013 #25

对于整体:

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});
15赞 Alex W 9/18/2013 #26

纯 JavaScript 非常简单,开销也小得多:

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

示例在这里

评论

0赞 Alex W 12/16/2014
@MarkAmery 公认的答案不包括如何在没有jQuery的情况下做到这一点。我的回答为公认的答案增加了补充好处。
23赞 Muhammad Aamir Ali 10/12/2013 #27

另一个可能的解决方案:

    var c = $("#checkboxid");
    if (c.is(":checked")) {
         $('#checkboxid').prop('checked', false);
    } else {
         $('#checkboxid').prop('checked', true);
    }
18赞 jj2422 11/14/2013 #28

选中和取消选中

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

评论

3赞 Mark Amery 12/16/2014
-​1;这给已经臃肿的线程没有任何价值。此处的代码与接受的答案完全相同。
6赞 anusha 4/23/2014 #29

你可以试试这个:

$('input[name="activity[task_state]"]').val("specify the value you want to check ")
16赞 Friedrich 5/27/2014 #30

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

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

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

更短的是:

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

这里也是一个 jsFiddle

11赞 NoWar 7/9/2014 #31

如果您使用 ASP.NET MVC,生成许多复选框,然后必须使用 JavaScript 选择/取消选择所有复选框,您可以执行以下操作。

[HTML全文]

@foreach (var item in Model)
{
    @Html.CheckBox(string.Format("ProductId_{0}", @item.Id), @item.IsSelected)
}

JavaScript的

function SelectAll() {       
        $('input[id^="ProductId_"]').each(function () {          
            $(this).prop('checked', true);
        });
    }

    function UnselectAll() {
        $('input[id^="ProductId_"]').each(function () {
            $(this).prop('checked', false);
        });
    }

评论

0赞 tpower 7/9/2014
为什么这里需要每个?
15赞 Serhat Koroglu 3/5/2015 #32

当您选中复选框时,例如;

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

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

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

尤其是当您删除了复选框 checked 属性时。

20赞 logan 4/21/2015 #33

对于 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');
23赞 Ardalan Shahgholi 9/24/2016 #34

正如@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 中,我们必须使用这样的东西:

j查询 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();
11赞 SedJ601 9/29/2016 #35

这可能会对某人有所帮助。

HTML5的

 <input id="check_box" type="checkbox" onclick="handleOnClick()">

JavaScript的。

  function handleOnClick(){

      if($("#check_box").prop('checked'))
      {        
          console.log("current state: checked");
      }
      else
      {         
          console.log("current state: unchecked");
      }    
 }
6赞 Kenmeister 3/15/2017 #36

如果您碰巧正在使用 Bootstrap(也许在不知不觉中)......

$('#myCheckbox').bootstrapToggle('on')
$('#myCheckbox').bootstrapToggle('off')

http://www.bootstraptoggle.com/

11赞 David Arul 11/1/2017 #37

if($('jquery_selector').is(":checked")){
  //somecode
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

评论

2赞 Stephen Rauch 11/1/2017
在给出答案时,最好对为什么你的答案是那个答案给出一些解释
7赞 Gaurang Sondagar 12/1/2017 #38

您可以通过不同的方式使用 JavaScript 选中复选框。您可以在下面看到。

  1. 第一种方法 -$('.myCheckbox').prop('checked', true);

  2. 第二种方法 -$('.myCheckbox').attr('checked', true);

  3. 第三种方法(用于检查复选框是否被选中的条件)-$('.myCheckbox').is(':checked')

10赞 Alex Montoya 9/16/2018 #39

如果您正在使用并且没有更改复选框,则需要添加如下内容:.prop('checked', true|false)trigger('click')

// Check
$('#checkboxF1').prop( "checked", true).trigger('click');


// Uncheck
$('#checkboxF1').prop( "checked", false).trigger('click');

评论

0赞 pangyuteng 8/8/2020
很高兴我找到了这个。谢谢!差点疯了!!
6赞 L Y E S - C H I O U K H 1/2/2019 #40

于2019年1月编辑

您可以使用: .prop( propertyName ) - 添加的版本: 1.6

p {margin: 20px 0 0;}
b {color: red;}
label {color: red;}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<input id="check1" type="checkbox" checked="checked">
<label for="check1">Check here</label>
<p></p>
 
<script>
$( "input" ).change(function() {
  var $input = $( this );
  $( "p" ).html(
    "The .attr( \"checked\" ): <b>" + $input.attr( "checked" ) + "</b><br>" +
    "The .prop( \"checked\" ): <b>" + $input.prop( "checked" ) + "</b><br>" +
    "The .is( \":checked\" ): <b>" + $input.is( ":checked" ) + "</b>" );
}).change();
</script>
 
</body>
</html>

在 Angular 框架上

示例 1

在 .html 文件中

<input type="checkbox" (change)="toggleEditable($event)">

在 .ts 文件中

toggleEditable(event) {
     if ( event.target.checked ) {
         this.contentEditable = true;
    }
}

示例 2

在 .html 文件中

<input type="checkbox" [(ngModel)]="isChecked" (change)="checkAction(isChecked ? 'Action1':'Action2')" />
1赞 Kamil Kiełczewski 12/28/2019 #41

JavaScript 解决方案也可以很简单,开销更少:

document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)

document.querySelectorAll('.myCheckBox').forEach(x=> x.checked=1)
checked A: <input type="checkbox" class="myCheckBox"><br/>
unchecked: <input type="checkbox"><br/>
checked B: <input type="checkbox" class="myCheckBox"><br/>

评论

1赞 Heretic Monkey 12/28/2019
这属于JavaScript(jQuery或Vanilla)的“选中/取消”复选框?或JavaScript“检查多个复选框”,而不是这个jQuery问题。
2赞 Omar Odeh 12/4/2020 #42

如果您有 id 来检查它,则可以执行此操作

document.getElementById('ElementId').checked = false

而这个取消选中

document.getElementById('ElementId').checked = true

评论

1赞 BingLi224 1/1/2022
它有效,但这与jquery无关。
1赞 vnapastiuk 7/29/2021 #43

如果您考虑使用vanilla js而不是jquery,则有一个解决方案:

//for one element: 
document.querySelector('.myCheckBox').checked = true /* or false */ //will select the first matched element
//for multiple elements:
for (const checkbox of document.querySelectorAll('.myCheckBox')) {
checkbox.checked = true //or false
}
3赞 Ali Sheikhpour 7/3/2023 #44

我想知道为什么没有一个旧答案提到要完全模拟滴答声,如果你想在模拟滴答声后触发其他东西,你还需要模拟变化事件:

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