【Javascript】【jQuery】jQuery实现全选功能

    
        Check All 
        A
        B
        C
        D
        E 
        Check All
        Uncheck All
        Reverse Check
        Submit
    

    

    

    
    
        $(() => {
            //点击全选框时，选择或取消全部Item
            $("#check-all").click(function () {
                $(".check-item").prop("checked", this.checked);
            });

            //Item发生变化时，全选框同步变化
            $(".check-item").click(function () {
                let isAllSelected = $(".check-item:not(:checked)").length == 0;
                $("#check-all").prop("checked", isAllSelected);
            });

            //全选
            $("#bt-check").click(function () {
                $(".check-item").prop("checked", true);
                $("#check-all").prop("checked", true);
            });

            //全部取消
            $("#bt-uncheck").click(function () {
                $(".check-item").prop("checked", false);
                $("#check-all").prop("checked", false);
            });

            //反向选取
            $("#bt-reverse").click(function () {
                $(".check-item").each(function () {
                    this.checked = !this.checked;
                });
                let isAllSelected = $(".check-item:not(:checked)").length == 0;
                $("#check-all").prop("checked", isAllSelected);
            });

            //提交
            $("#bt-submit").click(() => {
                $(".check-item:checked").each(function () {
                    alert(this.nextSibling.nodeValue);
                });
            });
        });