/**
* 基于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);
}
}
});
}