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

现代 jQuery

使用 .prop()：

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

DOM API

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

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

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

jQuery 1.5.x 及以下

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

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

请注意，这是 the approach used by jQuery's unit tests prior to version 1.6 并且比使用 $('.myCheckbox').removeAttr('checked'); 更可取，因为如果最初选中该框，则后者将在包含它的任何表单上更改对 .reset() 的调用的行为——这是一种微妙但可能不受欢迎的行为改变。

有关更多上下文，可以在 version 1.6 release notes 和 属性与属性 .prop() documentation 的部分。

---

利用：

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

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

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

---

这是使用 jQuery 选中和取消选中复选框的正确方法，因为它是跨平台标准，并且允许表单重新发布。

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

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

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

问题（jQuery 1.6）：

一旦用户单击一个复选框，该复选框就会停止响应“选中”属性更改。

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

Fiddle

解决方案：

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

Fiddle

此插件将更改 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;
});

---

你可以做

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

或者

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

如果您在要触发的复选框的 onclick 事件中有自定义代码，请改用此代码：

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

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

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

您可以像这样检查所有复选框：

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

---

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

---

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

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

---

要检查一个复选框，您应该使用

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

---

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

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

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

---

假设问题是...

如何按值检查复选框集？

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

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

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

---

我错过了解决方案。我会一直使用：

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

---

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

---

这是一种不使用 jQuery 的方法

函数 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.检查= cbElem.checked；}，假）；}，假）； 点击我！ 反射：

---

这是使用按钮选中和取消选中的代码：

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

---

尝试这个：

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

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

---

我们可以使用 elementObject 和 jQuery 来检查属性：

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

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

更新：Jquery 1.6+ 具有替换 attr 的新 prop 方法，例如：

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

---

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

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

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

---

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

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

---

另一种可能的解决方案：

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

---

正如@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();

---

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

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

---

对于 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');

---

选中和取消选中

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

---

请注意 Internet Explorer 9 之前 Internet Explorer 中的内存泄漏，因为 jQuery documentation states：

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

---

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

---

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

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

或者

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

更短的是：

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

这里也是 a jsFiddle。

---

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

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

Example here

---

我无法使用：

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

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

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

---

当您选中一个复选框时；

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

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

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

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

---

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

---

在 jQuery 中，

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

或者

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

在 JavaScript 中，

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

---