使用jQuery设置复选框的“ checked”

JavaScript

西里A

2020-03-09

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

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

要么

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

这样的事情存在吗?

第148篇《使用jQuery设置复选框的“ checked”》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

5个回答
泡芙村村Pro 2020.03.09

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

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

要么

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

更短的是:

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

这也是一个jsFiddle

梅Tom猿 2020.03.09

请注意,在Internet Explorer 9之前的Internet Explorer中内存泄漏,因为jQuery文档指出

在版本9之前的Internet Explorer中,使用.prop()将DOM元素属性设置为简单基本值(数字,字符串或布尔值)以外的任何内容,如果不删除该属性(使用.removeProp( ))从文档中删除DOM元素。若要在DOM对象上安全地设置值而不会导致内存泄漏,请使用.data()。

LEYTom 2020.03.09

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

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

达蒙阿飞斯丁 2020.03.09

您还可以使用新方法扩展$ .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()之类的唯一名称。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android