父子节点全选反选怎么实现，checbox父子节点联动。。

父子节点之间的id命名方式为：
cBox1
cBox1_2
cBox1_2_3
每选中一个节点，将其ID提出来。然后开始以下划线分割，并且以分割开来的id的拼接做为下一个ID，开始遍历所有的checkbox，查找对应的ID再要不就是给所有checkbox加多个属性 parentid="父节点ID,为0时表示为顶级节点"

加了个parentid，怎么写啊。
<div style="cursor: pointer">
            <div style="font-weight: bold" class="chekF">
                <input id="1ID" type="checkbox" parentid="0parId">OP任务
            </div>
            <div style="padding-left: 17px; width: 150px; color: #525252; font-weight: bold"
                class="chekZ1">
                <input id="4ID" type="checkbox" parentid="1parId">搜索任务
            </div>
            <div style="padding-left: 32px; width: 160px; float: left" class="chekZ2">
                <input id="7ID" type="checkbox" parentid="4parId">加词
            </div>
            <div style="border-bottom: #000 1px dotted; height: 8px; clear: both; font-size: 1px">
            </div>
            <div style="height: 10px">
            </div>
        </div>

大致的写了个
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>N级checkbox关联选中</title>
<style type="text/css">
.child0{margin-left:5px;}
.child1{margin-left:10px;}
.child2{margin-left:15px;}
.child3{margin-left:20px;}
</style>
<script type="text/javascript">
Array.prototype.inArray = function (value){var i;for (i=0; i < this.length; i++) {if (this[i] === value) {return true;}}return false};
function checkSibling(list,id){//检查同辈的checkbox是否有被选中的。无被选中的则返回-1
    var index=-1;
    for(i=0;i<list.length;i++){
        if(list[i].checked==true && list[i].id.indexOf(id)!=-1 && id.split('_').length==list[i].id.split('_').length)
        {
            index=1;
            break;
        }
    }
    return index;
}
function changebox(list,id,t){
    var ids=id.split("_");
    var arr=new Array();
    var lastid="";
    var siblingid="";
    var a="";
    for(k=0;k<ids.length;k++)
    {
        a+=a.length==0?ids[k]:'_'+ids[k];
        if(k==ids.length-2){siblingid=a+'_'}//得到与当前checkbox同辈的命名标识
        if(k==ids.length-1){lastid=a+'_'}//得到一个往下查找的ID命名标识
        arr.push(a);//得到一个直系往上查找的id数组
    }
    var index=checkSibling(list,siblingid);//判断当前checkbox是否有与其同辈的已经被选中
    for(i=0;i<list.length;i++)
    {
        if(list[i].type=="checkbox"){
            if(t==false && index!=-1){
                //如果当前为取消选中时且同辈的有被选中的：则不往上查找，保证只往下查找
               if((arr.inArray(list[i].id) || list[i].id.indexOf(lastid)!=-1) && list[i].id.split('_').length>id.split("_").length){
                    list[i].checked=t;
               }

            }else{
                if((arr.inArray(list[i].id) || list[i].id.indexOf(lastid)!=-1)){
                   list[i].checked=t;
                }
            }

        }
    }

}
function bindCheckbox(){
    var list=document.getElementById("boxlist").getElementsByTagName("input");
    for(i=0;i<list.length;i++)
    {
        (function(n){
            if(list[n].type=="checkbox"){
                var id=list[n].id;
                var marginv=id.split("_").length*20;
                document.getElementById(id).style.margin="0px 0px 0px "+marginv+"";
                list[n].onclick=function(){
                    changebox(list,id,this.checked);
                }
            }
         })(i)
    }
}
window.onload=function(){
    bindCheckbox();
}
</script>
</head>
<body>
<div id="boxlist">
<input type="checkbox" id="cbox1"  value="1" /><label>节点1</label><br />
<input type="checkbox"  id="cbox1_2" value="2" /><label>节点2</label><br />
<input type="checkbox"  id="cbox1_2_3" value="3" /><label>节点3</label>
<input type="checkbox"  id="cbox1_2_4" value="4" /><label>节点4</label><br />
<input type="checkbox"  id="cbox1_2_3_9" value="9" /><label>节点9</label>
<input type="checkbox"  id="cbox1_2_4_10" value="10" /><label>节点10</label><br />
<input type="checkbox" id="cbox5" value="5" /><label>节点5</label><br />
<input type="checkbox"  id="cbox5_6" value="6" /><label>节点6</label><br />
<input type="checkbox"  id="cbox5_6_7" value="7" /><label>节点7</label>
<input type="checkbox"  id="cbox5_6_8" value="8" /><label>节点8</label>
</div>
</body>
</html>

呃，这次木有问题了,哪位大侠有更有效率的方法别忘了跟一贴：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title>N级checkbox关联选中</title>
<style type="text/css">
.child0{margin-left:5px;}
.child1{margin-left:10px;}
.child2{margin-left:15px;}
.child3{margin-left:20px;}
</style>
<script type="text/javascript">
Array.prototype.inArray = function (value){var i;for (i=0; i < this.length; i++) {if (this[i] === value) {return true;}}return false};
function checkchild(list,id){//检查是否存在子节点被选中
    var index=-1;
    for(i=0;i<list.length;i++){
        if(list[i].checked==true && list[i].id.indexOf(id+'_')!=-1)
        {
            index=1;
            break;
        }
    }
    return index;
}
function changebox(list,id,t){
    var ids=id.split("_");
    var arr=new Array();
    var lastid="";
    var siblingid="";
    var a="";
    for(k=0;k<ids.length;k++)
    {
        a+=a.length==0?ids[k]:'_'+ids[k];
        if(k==ids.length-1){lastid=a+'_'}//得到一个往下查找的ID命名标识
        arr.push(a);//得到一个直系往上查找的id数组
    }
    if(t==false){

        //先向下处理所有子节点
        for(i=0;i<list.length;i++)
        {
            if(list[i].type=="checkbox" && list[i].id.indexOf(lastid)!=-1){
                list[i].checked=false;

            }
        }
        //arr.reverse();//将数组反转,以便从下往上查找,呃,不反转也行，循环体--也OK
        //再向上判断父节点下是否还有其他分支的子节点被选中
        for(j=arr.length-1;j>-1;j--)
        {
            var index=checkchild(list,arr[j]);
            if(index==-1){document.getElementById(arr[j]).checked=false}
        }


    }else{
        for(i=0;i<list.length;i++)
        {
            if(list[i].type=="checkbox"){
                if((arr.inArray(list[i].id) || list[i].id.indexOf(lastid)!=-1)){
                       list[i].checked=t;
                    }
            }
        }
    }


}
function bindCheckbox(){
    var list=document.getElementById("boxlist").getElementsByTagName("input");
    for(i=0;i<list.length;i++)
    {
        (function(n){
            if(list[n].type=="checkbox"){
                var id=list[n].id;
                var marginv=id.split("_").length*20;
                document.getElementById(id).style.margin="0px 0px 0px "+marginv+"";
                list[n].onclick=function(){
                    changebox(list,id,this.checked);
                }
            }
         })(i)
    }
}
window.onload=function(){
    bindCheckbox();
}
</script>
</head>
<body>
<div id="boxlist">
<input type="checkbox" id="cbox1"  value="1" /><label>节点1</label><br />
<input type="checkbox"  id="cbox1_2" value="2" /><label>节点2[父节点1]</label>
<input type="checkbox"  id="cbox1_11" value="11" /><label>节点11[父节点1]</label><br /><br />
<input type="checkbox"  id="cbox1_2_3" value="3" /><label>节点3[父节点2]</label>
<input type="checkbox"  id="cbox1_2_4" value="4" /><label>节点4[父节点2]</label><br />
<input type="checkbox"  id="cbox1_2_3_9" value="9" /><label>节点9[父节点3]</label>
<input type="checkbox"  id="cbox1_2_4_10" value="10" /><label>节点10[父节点4]</label><br /><input type="checkbox" id="cbox5" value="5" /><label>节点5</label><br />
<input type="checkbox"  id="cbox5_6" value="6" /><label>节点6[父节点5]</label><br />
<input type="checkbox"  id="cbox5_6_7" value="7" /><label>节点7[父节点6]</label>
<input type="checkbox"  id="cbox5_6_8" value="8" /><label>节点8[父节点6]</label>
</div>
</body>
</html>

调试易

父子节点全选反选怎么实现，checbox父子节点联动。。

解决方案 »