提问



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


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


要么


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


这样的事情存在吗?

最佳参考


jQuery 1.6 +



使用新的.prop()方法:[77]


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


jQuery 1.5.x及以下



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


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


请注意,这是jQuery在1.6版之前的单元测试所使用的方法,并且优于使用[79]


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


因为后者将在最初检查框的情况下,在包含它的任何形式上改变对.reset()的调用行为 - 一种微妙但可能不受欢迎的行为改变。[80]


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


任何版本的jQuery



如果你只使用一个元素,你可以随时修改HTMLInputElement.checked属性:[83]


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


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

其它参考1


使用:


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


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


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

其它参考2


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


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

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


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


问题(jQuery 1.6):


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


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


小提琴 [84]


解决方案:


通过在DOM元素上使用JavaScriptschecked属性,我们可以直接解决问题,而不是试图操纵DOM来做我们想要它做的事情。[85]]]


小提琴 [86]


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

其它参考3


你可以做


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


要么


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


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


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


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


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


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


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

其它参考4


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


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


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

其它参考6


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


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


要么


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


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


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


如果你这样做


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


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


BAD DEMO jQuery 1.6。我认为这是破碎的。对于1.6,我将发表一篇新帖子。[87]


新的工作演示jQuery 1.5.2适用于Chrome。[88]


两个演示都使用


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

其它参考7


假设问题是......


如何选中复选框 BY VALUE?



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


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


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

其它参考8


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


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

其它参考9


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


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


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

其它参考10


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

其它参考11


这是一种没有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>



尝试这个:


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

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

其它参考12


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


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

其它参考13


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


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


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

其它参考14


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


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


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


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


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

其它参考15


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


http://jsfiddle.net/tamilmani/z8TTt/ [90]


$("#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;
        }
    }
});

其它参考16


另一种可能的方案


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

其它参考17


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


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

其它参考18


检查和取消选中


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

其它参考19


请注意Internet  Explorer  9之前的Internet Explorer中的内存泄漏,正如jQuery文档所述:[91] [92]



  在版本9之前的Internet Explorer中,使用.prop()设置DOM
  element属性除了简单的原始值之外的任何东西
  (number,string或boolean)如果属性是,则可能导致内存泄漏
  在删除DOM元素之前不删除(使用.removeProp())
  来自该文件。在没有内存的情况下安全地设置DOM对象的值
  泄漏,使用.data()。


其它参考20


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

其它参考21


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

其它参考22


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


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


要么


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





更短的是:


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





这也是 jsFiddle 。[93]

其它参考23


简单的JavaScript非常简单,开销也少得多:


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


这里的例子[94]

其它参考24


当您选中复选框时;


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


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


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


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

其它参考25


我无法使用它:


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


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


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

其它参考26


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

其它参考27


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

其它参考28


在jQuery中,


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


要么


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


在JavaScript中,


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