jQuery prop设置checkbox全选、反选的例子

作者:袖梨 2022-06-25

大家都知道 jQuery 可通过 attr 方法来设置 dom 属性,自然的也就想到用 $(dom).attr('checked', 'checked'); 这种方法来选择 checkbox 了,但是最近在项目中使用 checkbox 全选、反选的时候,却出现了问题:
在使用 attr 方法设置选择后,点击第一次可以设置反选,第二次却不行了。

$(function(){
    var checkbox = $("input[type='checkbox']");
    //全选
    $('#select-all').click(function(){
        checkbox.attr('checked', true);
    });

    //反选
    $('#select-reverse').click(function(){
        checkbox.each(function(i, dom){
            if ( $(dom).attr('checked') ) {
                $(dom).removeAttr('checked');
            } else {
                $(dom).attr('checked', 'checked');
            }
        });
    });
});


在查阅了一些资料后,才发现:对于jQuery 1.6.0+ 的版本,要使用prop方法来设置。

$(function(){
    var checkbox = $("input[type='checkbox']");
    //全选
    $('#select-all').click(function(){
        checkbox.prop("checked", true);
    });
    //反选
    $('#select-reverse').click(function(){
        checkbox.prop("checked", function(index, attr){
            return !attr;
        });
    });
});

相关文章

精彩推荐