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

最新推荐文章于 2023-04-03 08:36:43 发布

itcqdzdj

最新推荐文章于 2023-04-03 08:36:43 发布

阅读量986

点赞数

分类专栏： jQuery 文章标签： javascript checkbox jquery

本文链接：https://blog.csdn.net/cqdz_dj/article/details/38637783

版权

jQuery 专栏收录该内容

2 篇文章 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;
        });
    }
}