一个带CHECKBOX的JS树，级联选中问题

<tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">┗</font> <font style="font-weight:bold;font-size:14px;">

<input type="checkbox" id="Forum_14" name="Forum0" onClick="ChildrenCheck('14');" value="14"  />大板块2
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┣</font> <font style="font-weight:bold;font-size:14px;">

<input type="checkbox" id="Forum_15" name="Forum14" onClick="ChildrenCheck('15');" value="15"  />小板块2-1
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┣</font> <font style="font-weight:bold;font-size:14px;">
<input type="checkbox" id="Forum_18" name="Forum15" onClick="ChildrenCheck('18');" value="18"  />小板块2-1-2
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┗</font> <font style="font-weight:bold;font-size:14px;">

<input type="checkbox" id="Forum_16" name="Forum15" onClick="ChildrenCheck('16');" value="16"  />小板块2-1-1
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┗</font> <font style="font-weight:bold;font-size:14px;">

<input type="checkbox" id="Forum_17" name="Forum14" onClick="ChildrenCheck('17');" value="17"  />小板块2-2
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">
<input type="checkbox" id="Forum_19" name="Forum17" onClick="ChildrenCheck('19');" value="19"  />小板块2-2-1
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">

<input type="checkbox" id="Forum_20" name="Forum17" onClick="ChildrenCheck('20');" value="20"  />小板块2-2-2
</font></td>
</tr> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
<td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┗</font> <font style="font-weight:bold;font-size:14px;">

<input type="checkbox" id="Forum_21" name="Forum17" onClick="ChildrenCheck('21');" value="21"  />小板块2-2-3
</font></td>
</tr>部分HTML代码贴上

两边加上table.忘加了。希望测试后予以告之。多谢。。

ps:jquery也可。
试了半天JQUERY中。
$("input[name="+ChildrenName+"]").attr("checked",true);
的同时，不知如何让他们同时执行childrenCheck($("input[name="+ChildrenName+"]").attr("id"))遂无奈放弃。。

写代码要注意规范啊
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function ChildrenCheck(pid)
{
var ParentID=document.getElementById("Forum_"+pid);    //此处获取当前点击的父CHECKBOX的ID
var ChildrenName=document.getElementsByName("Forum"+pid);     //此处表示所有NAME=父级复选框ID的checkbox
//alert(ChildrenName.length);
if (ChildrenName.length>0){
    for (var i=0;i<ChildrenName.length;i++)
    {
        newpid=ChildrenName[i].id.split("_")[1];
        NowChildrenName=ChildrenName[i];
        if (ParentID.checked==true)
        {
            NowChildrenName.checked=true;
            NowChildrenName.disabled=true;
        }
        else
        {
            NowChildrenName.checked=false;
            NowChildrenName.disabled=false;
        }
    ChildrenCheck(newpid);           //初步怀疑问题出现这里，这边调用的时候又一次出现了i这个变量，导致循环走不下去[/color]
    }
}
}</script>
<style type="text/css">
#div {
width:450px;
height:450px;
}
#div a{
position:absolute;
}
</style>
</head>
<body><table> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_14" name="Forum0" onClick="ChildrenCheck('14');" value="14"  />大板块2
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┣</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_15" name="Forum14" onClick="ChildrenCheck('15');" value="15"  />小板块2-1
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┣</font> <font style="font-weight:bold;font-size:14px;">
        <input type="checkbox" id="Forum_18" name="Forum15" onClick="ChildrenCheck('18');" value="18"  />小板块2-1-2
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_16" name="Forum15" onClick="ChildrenCheck('16');" value="16"  />小板块2-1-1
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_17" name="Forum14" onClick="ChildrenCheck('17');" value="17"  />小板块2-2
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">
        <input type="checkbox" id="Forum_19" name="Forum17" onClick="ChildrenCheck('19');" value="19"  />小板块2-2-1
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_20" name="Forum17" onClick="ChildrenCheck('20');" value="20"  />小板块2-2-2
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_21" name="Forum17" onClick="ChildrenCheck('21');" value="21"  />小板块2-2-3
        </font></td>
    </tr>
</table></body>
</html>

以上没有选中父级菜单功能下面添加上
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function ChildrenCheck(pid)
{
var ParentID=document.getElementById("Forum_"+pid);    //此处获取当前点击的父CHECKBOX的ID
var ChildrenName=document.getElementsByName("Forum"+pid);     //此处表示所有NAME=父级复选框ID的checkbox
//alert(ChildrenName.length);
if (ChildrenName.length>0){
    for (var i=0;i<ChildrenName.length;i++)
    {
        newpid=ChildrenName[i].id.split("_")[1];
        NowChildrenName=ChildrenName[i];
        if (ParentID.checked==true)
        {
            NowChildrenName.checked=true;
        }
        else
        {
            NowChildrenName.checked=false;
        }
    ChildrenCheck(newpid);
    }

}
}
//选中父级
function ParentCheck(pid){
var ParentID=document.getElementById("Forum_"+pid);    //此处获取当前点击的父CHECKBOX的ID
var ChildrenName=document.getElementsByName("Forum"+pid);     //此处表示所有NAME=父级复选框ID的checkbox
if (ChildrenName.length>0){
var num = 0;
for (var i=0;i<ChildrenName.length;i++)
{
newpid=ChildrenName[i].id.split("_")[1];
NowChildrenName=ChildrenName[i];
if (NowChildrenName.checked==true)
{
num++;
}
}

if(num > 0){
ParentID.checked = true;
}else{
ParentID.checked = false;
}
}
}</script>
<style type="text/css">
    #div {
        width:450px;
        height:450px;
    }
    #div a{
        position:absolute;
    }
</style>
</head>
<body><table> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_0" name="Forum-1" onClick="ChildrenCheck('0');" value="0"  />远程控制系统
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┣</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_1" name="Forum0" onClick="ChildrenCheck('1');ParentCheck('1');" value="1"  />用户管理
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┣</font> <font style="font-weight:bold;font-size:14px;">
        <input type="checkbox" id="Forum_2" name="Forum1" onClick="ChildrenCheck('2');ParentCheck('1')" value="2"  />添加管理员
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_3" name="Forum1" onClick="ChildrenCheck('3');" value="3"  />编辑管理员
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_4" name="Forum0" onClick="ChildrenCheck('4');" value="4"  />自助厅管理
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">
        <input type="checkbox" id="Forum_5" name="Forum4" onClick="ChildrenCheck('5');" value="5"  />基本设置
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_6" name="Forum4" onClick="ChildrenCheck('6');" value="6"  />地图视图
        </font></td>
    </tr>
</table></body>
</html>

抱歉上面那个没有完善，下面这个是完善的：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script type="text/javascript">
function ChildrenCheck(pid)
{
var ParentID=document.getElementById("Forum_"+pid);    //此处获取当前点击的父CHECKBOX的ID
var ChildrenName=document.getElementsByName("Forum"+pid);     //此处表示所有NAME=父级复选框ID的checkbox
//alert(ChildrenName.length);
if (ChildrenName.length>0){
    for (var i=0;i<ChildrenName.length;i++)
    {
        newpid=ChildrenName[i].id.split("_")[1];
        NowChildrenName=ChildrenName[i];
        if (ParentID.checked==true)
        {
            NowChildrenName.checked=true;
        }
        else
        {
            NowChildrenName.checked=false;
        }
    ChildrenCheck(newpid);
    }

}
}
//选中父级
function ParentCheck(pid){
var ParentID=document.getElementById("Forum_"+pid);    //此处获取当前点击的父CHECKBOX的ID
var ChildrenName=document.getElementsByName("Forum"+pid);     //此处表示所有NAME=父级复选框ID的checkbox
if (ChildrenName.length>0){
var num = 0;
for (var i=0;i<ChildrenName.length;i++)
{
newpid=ChildrenName[i].id.split("_")[1];
NowChildrenName=ChildrenName[i];
if (NowChildrenName.checked==true)
{
num++;
}
}

if(num > 0){
ParentID.checked = true;
}else{
ParentID.checked = false;
}
}
}</script>
<style type="text/css">
    #div {
        width:450px;
        height:450px;
    }
    #div a{
        position:absolute;
    }
</style>
</head>
<body><table> <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_0" name="Forum-1" onClick="ChildrenCheck('0');" value="0"  />远程控制系统
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┣</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_1" name="Forum0" onClick="ChildrenCheck('1');ParentCheck('0');" value="1"  />用户管理
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┣</font> <font style="font-weight:bold;font-size:14px;">
        <input type="checkbox" id="Forum_2" name="Forum1" onClick="ChildrenCheck('2');ParentCheck('1')" value="2"  />添加管理员
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┃┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_3" name="Forum1" onClick="ChildrenCheck('3');ParentCheck('1')" value="3"  />编辑管理员
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　┗</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_4" name="Forum0" onClick="ChildrenCheck('4');" value="4"  />自助厅管理
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">
        <input type="checkbox" id="Forum_5" name="Forum4" onClick="ChildrenCheck('5');ParentCheck('4')" value="5"  />基本设置
        </font></td>
    </tr>    <tr onMouseOver="this.bgColor='#EEEEEE'" onMouseOut="this.bgColor=''">
        <td align="Left" valign="middle"><font color="#FF9900" style="font-size:22px; line-height:19px;">　　┣</font> <font style="font-weight:bold;font-size:14px;">

        <input type="checkbox" id="Forum_6" name="Forum4" onClick="ChildrenCheck('6');ParentCheck('4')" value="6"  />地图视图
        </font></td>
    </tr>
</table></body>
</html>

调试易

一个带CHECKBOX的JS树，级联选中问题

解决方案 »