[jQuery]操作具有父子关系的复选框

/**
 * 基于jQuery 
 * 将指定区域的，且具有父子关系的
 * 复选框全选/全不选
 * 
 * 注意:
 *  1:必须是有父子关系的复选框
 *      □父-复选框
 *          ☑子-复选框
 *          ☑子-复选框
 *      □父-复选框
 *          ☑子-复选框
 *  2:复选框的class属性格式为
 *      子ID+逗号+父ID  --> 例如  class="100,20"
 *  3:如果想不用class属性，改为ID或其他，修改attributeName即可
 *  4:如果不想用逗号为分隔符，修改split即可
 * */

jQuery源码

//要获取元素哪个属性  [id,class,name]等
var attributeName = "class";
//根据哪个分隔符拆分
var split = ",";
//checkbox CSS 选择器
var checkboxCssSelect ='#myForm\\:dataTable1 input[type="checkbox"]';

$(document).ready(function(){
    //给当前页面所有的复选框设置点击事件
    //$(":checkbox")
    $(checkboxCssSelect).click(function(){
        //判断复选框是否选中
        var flag = $(this).is(":checked");
        //选中复选框
        if(flag){
            //选中复选框
            selectTrue($(this));
        }else{
            //取消选中复选框
            selectFalse($(this));
        }
    });

});

//获取指定Dom节点的指定属性值，并且根据特定分隔符分解
//dom : dom元素
//attributeName : 要获取此元素哪个属性  [id,class,name]等
//split : 根据哪个分隔符拆分
function getStrArray (dom,attributeName,split){
    //获取复选框的class属性
    var classStr = $(dom).attr(""+attributeName+"");
    //拆分class字符
    var classArray = classStr.split(''+split+'');
    return classArray;
}

//选中复选框
function selectTrue(checkboxDom){
    //获取指定Dom节点的指定属性值
    var classArray = getStrArray(checkboxDom,attributeName,split);
    //获取拆分后的第二个字符(父类型ID)
    var parentId = classArray[1];
    //获取该复选框的id
    var id = classArray[0];
    //判断选中的是父类型还是子类型
    var flag = selectIsParentOrChild(parentId);

    if(flag){
        //选中的是父类型 给指定子类型设置选中状态
        setCheckedByCheckbox(id,true,1);
    }else{
        //选中的是子类型 将父类型设置为选中状态
        //setCheckedByCheckbox(parentId,true,0);
    }
}

//取消选中复选框
function selectFalse(checkboxDom){
    //获取指定Dom节点的指定属性值
    var classArray = getStrArray(checkboxDom,attributeName,split);
    //获取拆分后的第二个字符(父类型ID)
    var parentId = classArray[1];
    //获取该复选框的id
    var id = classArray[0];
    //判断选中的是父类型还是子类型
    var flag = selectIsParentOrChild(parentId);

    if(flag){
        //取消的是父类型 给指定子类型设置取消状态
        setCheckedByCheckbox(id,false,1);
    }
}

//判断选中的是父类型还是子类型     
//true : 父类型
//false: 子类型
function selectIsParentOrChild (parentId) {
    var flag = 0;
    //获取所有复选框
    $(checkboxCssSelect).each(function() {
        //获取指定Dom节点的指定属性值
        var classArray = getStrArray($(this),attributeName,split);
        //判断拆分后的字符串是不是两个
        if(classArray.length==2){
            //获取拆分后的第一个字符(类型ID)
            var id = classArray[0];
            //判断
            if(id==parentId){
                flag = 1;
            }
        }
    });

    if(flag==1){
        return false;
    }else{
        return true;
    }
}

//给指定类型设置选中状态
//parentId : 复选框id
//state : 设置的选中状态  (true||false)
//index : 取值[0,1] 0:与复选框id比较  1:与复选框父ID比较
function setCheckedByCheckbox (parentId , state ,index){
    $(checkboxCssSelect).each(function() {
        //获取指定Dom节点的指定属性值
        var classArray = getStrArray($(this),attributeName,split);
        //判断拆分后的字符串是不是两个
        if(classArray.length==2){
            //获取parentId
            var pId = classArray[index];
            //判断是否为同一个父类
            if(pId==parentId){
                //为此复选框设置选中状态
                $(this).prop('checked', state);
            }
        }
    });
}