[javascript] 设置“检查”的复选框与jQuery?



Answers

使用:

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

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

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

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

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

要么

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

这样的事情存在吗?




你可以做

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

要么

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

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

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

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

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

你可以检查所有复选框,如下所示:

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



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




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

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




假设问题是......

如何检查复选框 - 按设置

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

西安的答案可以用一个更具体的选择器来扩展,使用下面这行代码:

$("input.myclass[name='myname'][value='the_value']").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();



当你选中一个复选框时,

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

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

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

特别是当你删除复选框检查属性。




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

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

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




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

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

要么

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

更短的将是:

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

这也是一个jsFiddle




另一个可能的解

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



在jQuery中,

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

要么

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

在JavaScript中,

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



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



这是用一个按钮选中和取消选中的代码:

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



我们可以使用elementObject和jQuery来获取属性:

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

我们可以在没有任何错误的情况下将它用于所有jQuery版本。

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

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



检查并取消选中

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



Related