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

灬上海爽爷 2011-01-12 11:52:03
最近在做一颗带CHECKBOX的树。
需要勾选父级CHECKBOX的时候遍历其下所有的CHECKBOX，自动勾选。
定义是这样的。
子checkbox的name等于父checkbox的ID（差不多是这样，但是考虑到某些浏览器的问题。例如父checkbox的ID是checkbox_6,那么子checkbox的name是checkbox6）

发一个现在写的onclick的函数，问题就出在这里。
function ChildrenCheck(pid)

{

ParentID=document.getElementById("Forum_"+pid);    //此处获取当前点击的父CHECKBOX的ID

ChildrenName=document.getElementsByName("Forum"+pid);     //此处表示所有NAME=父级复选框ID的checkbox

//alert(ChildrenName.length);

if (ChildrenName.length>0){

	for (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这个变量，导致循环走不下去

	}

}

}


虽然大致猜到问题出现在哪，但是苦思良久实在想不到解决方案，万望高手指点一下，具体情况见图。


应该是大板块2下所有的CHECKBOX都被选中，但是只要出现循环，就会停掉。
...全文
402 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
cfxiao 2011-08-06
  • 打赏
  • 举报
 回复
如有疑问可以联系本人QQ：12601080103 大家一起探讨 嘿嘿
cfxiao 2011-08-06
  • 打赏
  • 举报
 回复
抱歉上面那个没有完善，下面这个是完善的：
<!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>
cfxiao 2011-08-06
  • 打赏
  • 举报
 回复
以上没有选中父级菜单功能 下面添加上
<!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>
灬上海爽爷 2011-01-12
  • 打赏
  • 举报
 回复
原来如此。。写了1年多的代码。。居然还是如此不规范。。实在惭愧。。
多谢。
Mr-Jee 2011-01-12
  • 打赏
  • 举报
 回复
写代码要注意规范啊
<!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>
灬上海爽爷 2011-01-12
  • 打赏
  • 举报
 回复
ps:jquery也可。
试了半天JQUERY中。
$("input[name="+ChildrenName+"]").attr("checked",true);
的同时，不知如何让他们同时执行childrenCheck($("input[name="+ChildrenName+"]").attr("id"))

遂无奈放弃。。
灬上海爽爷 2011-01-12
  • 打赏
  • 举报
 回复
两边加上table.忘加了。希望测试后予以告之。多谢。。
灬上海爽爷 2011-01-12
  • 打赏
  • 举报
 回复 


	<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代码贴上
纯JS+HTML写的checkBox Tree 级联选中 好用无BUG
纯JS+HTML写的checkBox Tree 级联选中 好用无BUG 1 选上级，自动选下级 2 选下级，自动选上级 在网上找的其他例子，都有BUG，本程程序绝对可用，放心下载！
使用jQuery+EasyUI实现CheckBoxTree的级联选中特效
需求：子结点选中，父节点随之选中，父节点取消，子节点随之取消 代码： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...
Vite + Vue3 + ElementPlus业务组件封装
改变传统的UI数据传递方式，通过属性配置的方式对组件数据进行渲染 基于Vue3+ElementPlus+Vite环境开发，Vue3全新的 setup 语法糖 针对初级程序员的开发模式有一个质的提升：提高项目的业务开发效率和逻辑，提高...
checktreepanel node级联选中，支持半选
checktreepanel的checkbox点击事件，支持全选，半选，父子迭代。
H5 jQuery多级复选框checkbox选中代码.zip
 all = $(this).find(":checkbox").not("[name='sales_group_id'],:disabled") ,  allChecked = $(this).find(":checked").not("[name='all-checked']") ,  thisAllCheckBtn = $(this).find(".all-checked ...
JavaScript

87,907

社区成员

224,614

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章