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

Javascript 作者: Rector 85阅读 0评论 0收藏 收藏本文

郑重申明:本文未经许可,禁止任何形式转载

问题描述

如题,当前有需求,需要使用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>

阅读了该文章的人还浏览了...

本文永久链接图享网 » [javascript]使用jQuery如何选中一个复选框(checkbox)?

发布于: 2018-03-06 08:05:07
分享扩散:

文章评论

获取验证码