JQuery实现checkbox复选框同步勾选和取消

JavaScript 1698浏览 1评论

JQuery对checkbox的读写与其他input不太一样,很容易出错,浪费很多时间。

打个比方,要获取checkbox是否是checked状态,用.attr('checked') === true 是不奏效的,得用 .is(':checked') === true

本例要实现checkbox同步勾选和取消,我们仅同步与当前主题data-url一样的checkbox:

$('input[type=checkbox]').on('click', function() {
    var url = $(this).attr('data-url');
    var status = $(this).is(':checked');
    $('input[type=checkbox]').each(function() {
        var self = $(this);
        if (self.attr('data-url') === url) {
            if (status === true) {
                self.prop('checked', true);
            } else {
                self.prop('checked', false);
            }
        }
    });
});

由此我们引申出JQuery操作checkbox的几个要点

  1. 判断是否checked,用.is(':checkd') === true 或者.is(':checkd') === false方法;
  2. 设置checked,JQuery 1.6+.prop('checkbox', true)1.5.x及以下.attr('checked', true)false值同理。
  3. 设置checked错误方法: .prop('checkbox') = true.attr('checkbox') = truefalse同理,切记!
  4. 删除 checked 属性用:.removeAttr('checked')

 

参考资料:

  1. Setting “checked” for a checkbox with jQuery?
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

网友最新评论 (1)

  1. 研究研究,学习学习。
    zengda 1年前 (2016-05-16) 回复 编辑