jQuery对checkbox 复选框的全选全不选反选的操作

Html

Css

li{ list-style-type: none;}

$(function() {
    //全选/全不选
    $("#all").click(function() {
        $("[name=items]:checkbox").attr("checked", this.checked);
    });
    $("[name=items]:checkbox").click(function() {
        var flag = true;
        $("[name=items]:checkbox").each(function() {
            if (!this.checked) {
                flag = false;
            }
        });
        $("#all").attr("checked", flag);
    })
    //全选
    $("#selectAll").click(function() {
        $("[name=items]:checkbox").each(function() {
            $(this).attr("checked", true);
        });
    });
    //全不选
    $("#unSelect").click(function() {
        $("[name=items]:checkbox").each(function() {
            $(this).attr("checked", false);
        });
    });
    //反选
    $("#reverse").click(function() {
        $("[name=items]:checkbox").each(function() { //遍历每一个复选框
            //$(this).attr("checked",!$(this).attr("checked")); //jQuery方法取复选框的反向值
            this.checked = !this.checked; //js方法
        });
    });
    //输出选中的值
    $("#btn").click(function() {
        var str = "你选中的是：\r\n";
        $("[name=items]:checkbox:checked").each(function() {
            str += $(this).val() + "\r\n";
        });
        alert(str);
    });
})

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.6.4

立即下载

jQuery对checkbox 复选框的全选全不选反选的操作



代码描述：这篇文章主要介绍了jQuery对checkbox 复选框的全选全不选反选的操作的相关资料非常不错，具有参考借鉴价值，需要的朋友可以参考下

注：由于jquery版本的变更，新版本出现只能点击一次，老一点的版本是可以的，新的版本不可以使用attr来设置选中状态了，第一种解决方法是可以使用js原生的方法this.checked=true/false;
第二种解决方法是把attr换成prop。
以上所述是小编给大家介绍的jQuery对checkbox 复选框的全选全不选反选的操作，希望对大家有所帮助

1

最新

发表评论全部评论

暂时没有评论！

白熊有肉0

2017/5/19 11:02:12

有点小问题，全选以后点反选，全选的按钮仍然被选中
回复

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

大圣

相关代码

jQuery对checkbox 复选框的全选全不选反选的操作

最新