javascript checkbox选中 checkbox默认选中 - 使用jQuery设置“已选中”复选框?



15 Answers

使用:

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

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

$('.myCheckbox').is(':checked');
checkbox全选 checkbox选中事件 radio选中事件

我想做这样的事情来使用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()
});



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

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




假设问题是......

如何选中复选框设置BY VALUE?

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

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

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



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

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

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




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




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

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



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

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

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




另一种可能的方案

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



请注意Internet Explorer 9之前的Internet Explorer 9的内存泄漏,因为api.jquery.com/prop

在版本9之前的Internet Explorer中,使用.prop()将DOM元素属性设置为除简单原始值(数字,字符串或布尔值)之外的任何内容都可能导致内存泄漏(如果未删除该属性)(使用.removeProp( ))从文档中删除DOM元素之前。 要在没有内存泄漏的情况下安全地设置DOM对象的值,请使用.data()。




检查和取消选中

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



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



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

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

这里的例子




我无法使用它:

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

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

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



在jQuery中,

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

要么

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

在JavaScript中,

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



Related