[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);
            }
        }
    });
}
  • 2
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值