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

【问题标题】：Setting "checked" for a checkbox with jQuery使用 jQuery 为复选框设置“选中”
【发布时间】：2010-09-30 09:18:44
【问题描述】：

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

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

或

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

这样的事情存在吗？

【问题讨论】：

一个更具体（而且非常有用！）的问题，“如何按值检查复选框集中的项目？”，我想我们也可以在这里讨论，我在下面发布了一个答案.
在此处查看使用 jQuery 的其他方法 stackoverflow.com/a/22019103/1868660
如果你需要触发 onchange 事件，那就是$("#mycheckbox").click();
"Checking something" 建议对其进行测试，所以我认为“使复选框被选中”是一个更清晰、更好的标题。
prop();功能是完美的答案。见函数定义——api.jquery.com/prop

标签： javascript jquery checkbox selected checked

【解决方案1】：

在 jQuery 中，

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

或

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

在 JavaScript 中，

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

【讨论】：

这没有回答问题。
此答案已过时，因为它使用 .attr 而不是 .prop。

【解决方案2】：

选中和取消选中

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

【讨论】：

-1;这对已经膨胀的线程根本没有任何价值。这里的代码和接受的答案完全一样。

【解决方案3】：

纯 JavaScript 非常简单，开销也少得多：

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

Example here

【讨论】：

@MarkAmery 接受的答案不包括如何在没有 jQuery 的情况下做到这一点。我的回答为接受的答案增加了补充好处。

【解决方案4】：

总体来说：

$("#checkAll").click(function(){
    $(".somecheckBoxes").prop('checked',$(this).prop('checked')?true:false);
});

【讨论】：

【解决方案5】：

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

【讨论】：

-1 仅作为代码答案，不直接回答问题，并且没有添加其他答案尚未涵盖的内容。

【解决方案6】：

这是完整的答案 使用 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
    });

【讨论】：

【解决方案7】：

试试这个：

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

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

【讨论】：

【解决方案8】：

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

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

我发现没有span，不管你做什么界面都不会更新。

【讨论】：

【解决方案9】：

如果使用移动设备并且您希望界面更新并将复选框显示为未选中，请使用以下内容：

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

【讨论】：

【解决方案10】：

要检查您应该使用的复选框

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

或

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

要取消选中复选框，您应该始终将其设置为 false：

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

如果你这样做

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

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

BAD DEMO jQuery 1.6。我认为这是坏的。对于 1.6，我将就此发表一篇新文章。

NEW WORKING DEMO jQuery 1.5.2 在 Chrome 中工作。

两个演示都使用

$('#tc').click(function() {
    if ( $('#myCheckbox').attr('checked')) {
        $('#myCheckbox').attr('checked', false);
    } else {
        $('#myCheckbox').attr('checked', 'checked');
    }
});

【讨论】：

这是不准确的。将 'checked' 属性设置为 '' 将不会取消选中至少 chrome 中的复选框。
@xixonia 我在发布您的小提琴之前进行了测试，因为您没有更改左侧的菜单以包含 jquery，因此无法正常工作
mcgralim - 在 1.6 中更容易......$(".mycheckbox").prop("checked", true/false)
@MarkAmery 你提到我的帖子在发布时没有添加任何内容，但这是准确的。如果您查看已接受答案的历史记录，您会发现他们建议删除该元素。这使得无法重置表单，这就是我开始发布的原因。
@mcgrailm 我已经继续并根据您的评论修改了接受的答案。如果您想看看它并检查它在当前状态下是否看起来不错，我将不胜感激。对于我提出的尖锐批评，我再次道歉，这些批评至少在一定程度上是高度误导的。

【解决方案11】：

你可以的

$('.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()
@Michah 删除选中的属性使得无法重置表单
此答案已过时，因为它使用 .attr 而不是 .prop。
$("#mycheckbox").click(); 为我工作，因为我也在收听更改事件，.attr & .prop 没有触发更改事件。

【解决方案12】：

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

【讨论】：

@livfree75 删除选中的属性使得无法重置表单
此答案已过时，因为它使用 .attr 而不是 .prop。

【解决方案13】：

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

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

【讨论】：

前一个会失败...检查的不是jquery对象成员
此答案已过时，因为它使用 .attr 而不是 .prop。
IMO click 事件在 Firefox 和 Edge 中不可靠。