jQuery实现的Checkbox“全选/全不选”

- 日理万妓 2022-08-11 03:22 262阅读 0赞

自己实现的checkbox的“全选/全不选”，只需要传入“全选/全不选”checkbox的id属性和行的checkbox的name属性即可

/**
     * 全选/全不选
     * 适用于上下两个“全选/全不选”（也可以只有一个“全选/全不选”）
     * 每行数据的checkbox的name也必须相同
     * 若有两个“全选/全不选”，他们的name属性必须相同，id不同
     */
    
    
    /**
     * 全选/全不选
     * @param source 触发“全选/全不选”点击事件的复选框的id
     * @param itemName 栏目的name
     * @param other 另一个“全选/全不选”的复选框id
     */
    function checkItems(source, itemName, other){
        $("#"+source).bind('click', function(){
            if(this.checked){
                $("input[name='" + itemName + "']").each(function(){
                    this.checked = true;
                });
            } else {
                $("input[name='" + itemName + "']").each(function(){
                    this.checked = false;
                });
            }
            if($("#"+other)){
                $("#"+other).attr("checked", this.checked);
            }
        });
    }
    /**
     * 若所有的行被选中，则全选也设置为选中状态
     * @param allName “全选/全不选”checkbox的name
     * @param subName 栏目的name
     */
    function checkSelectAll(allName,subName){
        var i = 0,j = 0;
        $("input[name='" + subName + "']").each(function(){
            i++;
            if (this.checked) {
                j++;
            }
        });
        if(i == j){//所有的行被选中，设置全选为选中状态
            $("input[name='" + allName + "']").each(function(){
                this.checked = true;
            });
        } else {//不是所有的行被选中，设置全选为未选中状态
            $("input[name='" + allName + "']").each(function(){
                this.checked = false;
            });
        }
    }