[javascript]使用jQuery如何选中一个复选框(checkbox)？

问题描述

如题，当前有需求，需要使用jQuery选中一个复选框(checkbox)，以下为jQuery的伪代码：

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

或者

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

那么，使用jQuery如何实现选中复选框(checkbox)的功能呢？

方案一

jQuery 1.6+ 版本中
可以使用新的jQuery方法.prop()，如：

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

jQuery 1.5.x 或者以下版本
.prop()方法不可用，我们可以使用.attr()方法来处理和实现，如：

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

如果你的HTML文档中只有惟一的元素，则还可以使用通用于任何jQuery版本的写法，如：

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

方案二

封装一个jQuery的复选框勾选的插件，如：

(function( $ ) {
    $.fn.checked = function(value) {
        if(value === true || value === false) {
            $(this).each(function(){ this.checked = value; });
        }
        else if(value === undefined || value === 'toggle') {
            $(this).each(function(){ this.checked = !this.checked; });
        }

        return this;
    };
})( jQuery );

调用示例：

// 选中
$(':checkbox').prop('checked', true);

// 不选中
$(':checkbox').prop('checked', false);

// 选中和不选中切换
$(':checkbox').prop('checked', function (i, value) {
    return !value;
});

方案三

另一种jQuery的扩展封装，如：

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

方案四

使用纯javascript而不使用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>