dTree树的checkbox（选中父节点，如何使其子节点都选中？）

raulchenbest 2007-10-26 10:18:23
代码如下
<html>
<head>
<title>""</title>
<link rel="StyleSheet" href="../css/dtree.css" type="text/css" />
<script type="text/javascript" src="../js/dtree.js"></script>
<script language="Jscript" >
</script>

</head>

<body>
<table>

<td width="50%" valign="top">
<p> <a href="javascript: dd.closeAll();"> 保存 </a>
|<a href="javascript: dd.openAll();"> 展开 </a>
|<a href="javascript:dd.closeAll();"> 缩起 </a></p>
<script type="text/javascript">
dd = new dTree('d');
dd.add(0,-1,'省市列表','');
dd.add(1,0,'<input type="checkbox" name="check" value="1" >辽宁','');
dd.add(2,0,'<input type="checkbox" name="check" value="1" >湖北','');
dd.add(3,0,'<input type="checkbox" name="check" value="1" >湖南','');
dd.add(4,0,'<input type="checkbox" name="check" value="1" >江西');
dd.add(5,0,'<input type="checkbox" name="check" value="1" >浙江','');
dd.add(6,5,'<input type="checkbox" name="check" value="1" >杭州','');
dd.add(7,5,'<input type="checkbox" name="check" value="1" >嘉兴','');
dd.add(8,4,'<input type="checkbox" name="check" value="1" >南昌','');
dd.add(9,4,'<input type="checkbox" name="check" value="1" >九江','');
dd.add(10,4,'<input type="checkbox" name="check" value="1" >樟树','');
document.write(dd);
</script>

</td>
</tr>
</table>


</body>
</html>
...全文
2445 12 打赏 收藏 转发到动态 举报
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
码奴夫人 2012-01-10
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 luchajava 的回复:]
我的性能上超越了你的
[/Quote]
你这个，有异常@~ 首先chkObject.id找不到，另外，当选中多个子节点后，某一个子节点去去掉勾，总体的父节点，就会去掉勾，而这个父节点下面还是有选中的子节点的。所以错误
javamcl123 2011-03-22
  • 打赏
  • 举报
 回复
学习中
Horrison 2011-03-22
  • 打赏
  • 举报
 回复
此贴是好贴
yanglunliang 2010-12-10
  • 打赏
  • 举报
 回复 
d.add(6337,6334,'<input type="checkbox" id="6337" name="6334"  onclick="checkStatus(6337)"> 浏览','');			 

d.add(6244,6243,'<input type="checkbox" id="6244" name="6243"  onclick="checkStatus(6244)"> 栏目信息管理','/admin/list/ColInfo.jsp?strDir=lists/gongzuodongtai/caiwushenji/cwxx/caikuaishujuchaxun/2009nian&rid=6243&name=2009年');			 

d.add(6245,6243,'<input type="checkbox" id="6245" name="6243"  onclick="checkStatus(6245)"> 信息发布管理','/admin/list/PubManager.jsp?strDir=lists/gongzuodongtai/caiwushenji/cwxx/caikuaishujuchaxun/2009nian&rid=6243&name=2009年');			 

d.add(6246,6243,'<input type="checkbox" id="6246" name="6243"  onclick="checkStatus(6246)"> 浏览','');			 

			document.write(d);

			

			/*

			 *选中no及其子节点

			 *nodeid:当前节点,parentId父节点

			 */

			function checkStatus(nodeId){

				checkPar(nodeId);

				try{

				    var nodes = document.getElementsByName(nodeId);//得到所有此节点的子节点

				    var ischeckd=document.getElementById(nodeId).checked;

				    for(var i=0,size=nodes.length;i <size;i++){

			            if(nodes[i].name == nodeId){//parentID为此nodeid就选中

			                nodes[i].checked = ischeckd;

			                checkStatus(nodes[i].id);

			            }

				    }

				 }catch(err){}

			}

			/*

			 *选中节点的父节点

			 */

			function checkPar(nodeId) {

			try{

				//当前节点

				var node=document.getElementById(nodeId);

			    if(node.name == -1) {//根节点就停止

			    	return;

			    }

		        var fatherNode = document.getElementById(node.name);

		        

		        fatherNode.checked=node.checked;

		        checkPar(chkObject.id);

			    

			 }catch(err){

			 	alert(err);

			 }

			}

			

			</script>

性能不错，800多个节点比楼上的好多了。
yanglunliang 2010-12-10
  • 打赏
  • 举报
 回复
我的性能上超越了你的
yanglunliang 2010-12-10
  • 打赏
  • 举报
 回复
d.add(6337,6334,'<input type="checkbox" id="6337" name="6334" onclick="checkStatus(6337)"> 浏览','');
d.add(6244,6243,'<input type="checkbox" id="6244" name="6243" onclick="checkStatus(6244)"> 栏目信息管理','/admin/list/ColInfo.jsp?strDir=lists/gongzuodongtai/caiwushenji/cwxx/caikuaishujuchaxun/2009nian&rid=6243&name=2009年');
d.add(6245,6243,'<input type="checkbox" id="6245" name="6243" onclick="checkStatus(6245)"> 信息发布管理','/admin/list/PubManager.jsp?strDir=lists/gongzuodongtai/caiwushenji/cwxx/caikuaishujuchaxun/2009nian&rid=6243&name=2009年');
d.add(6246,6243,'<input type="checkbox" id="6246" name="6243" onclick="checkStatus(6246)"> 浏览','');
document.write(d);

/*
*选中no及其子节点
*nodeid:当前节点,parentId父节点
*/
function checkStatus(nodeId){
checkPar(nodeId);
try{
var nodes = document.getElementsByName(nodeId);//得到所有此节点的子节点
var ischeckd=document.getElementById(nodeId).checked;
for(var i=0,size=nodes.length;i <size;i++){
if(nodes[i].name == nodeId){//parentID为此nodeid就选中
nodes[i].checked = ischeckd;
checkStatus(nodes[i].id);
}
}
}catch(err){}
}
/*
*选中节点的父节点
*/
function checkPar(nodeId) {
try{
//当前节点
var node=document.getElementById(nodeId);
if(node.name == -1) {//根节点就停止
return;
}
var fatherNode = document.getElementById(node.name);

fatherNode.checked=node.checked;
checkPar(chkObject.id);

}catch(err){
alert(err);
}
}

</script>
ScarStone 2010-10-29
  • 打赏
  • 举报
 回复
学习。。。。
hshhack 2009-09-18
  • 打赏
  • 举报
 回复
楼主对于多的不可取，如果INPUT有N个那先一个就要遍历N的N次方。如何N=1000，你算算看有多大
wangzi6hao 2008-12-22
  • 打赏
  • 举报
 回复 


<script type="text/javascript" >



dd = new dTree( 'dd ');

dd.add(0,-1, '省市列表 ', ' ');

dd.add(1,0, '<input type="checkbox" name="check" value="1" class="0" id="ch1" onClick="checkStatus(1,this)">辽宁 ');

dd.add(2,0, '<input type="checkbox" name="check" value="2" class="0" id="ch2" onClick="checkStatus(2,this)">湖北 ');

dd.add(3,0, '<input type="checkbox" name="check" value="3" class="0" id="ch3" onClick="checkStatus(3,this)">湖南 ');

dd.add(4,0, '<input type="checkbox" name="check" value="4" class="0" id="ch4" onClick="checkStatus(4,this)">江西 ');

dd.add(5,0, '<input type="checkbox" name="check" value="5" class="0" id="ch5" onClick="checkStatus(5,this)">浙江 ');

dd.add(6,5, '<input type="checkbox" name="check" value="6" class="5" id="ch6" onClick="checkStatus(6,this)">杭州 ');

dd.add(7,5, '<input type="checkbox" name="check" value="7" class="5" id="ch7" onClick="checkStatus(7,this)">嘉兴 ');

dd.add(8,4, '<input type="checkbox" name="check" value="8" class="4" id="ch8" onClick="checkStatus(8,this)">南昌 ');

dd.add(9,4, '<input type="checkbox" name="check" value="9" class="4" id="ch9" onClick="checkStatus(9,this)">九江 ');

dd.add(10,4, '<input type="checkbox" name="check" value="10" class="4" id="ch10" onClick="checkStatus(10,this)">樟树 ');

dd.add(11,10, '<input type="checkbox" name="check" value="11" class="10" id="ch11" onClick="checkStatus(11,this)">樟树 ');

dd.add(12,10, '<input type="checkbox" name="check" value="12" class="10" id="ch12" onClick="checkStatus(12,this)">樟树 ');

dd.add(13,12, '<input type="checkbox" name="check" value="13" class="12" id="ch13" onClick="checkStatus(13,this)">樟树 ');

dd.add(14,1, '<input type="checkbox" name="check" value="14" class="1" id="ch14" onClick="checkStatus(14,this)">樟树 ');

document.write(dd);

function checkStatus(no,chkBox){

	checkPar(chkBox);//当子目录选中时,父目录也选中

	var chks = document.getElementsByTagName('input');//得到所有input

	for(var i=0;i <chks.length;i++){

		if(chks[i].name.toLowerCase() == 'check'){//得到所名为check的input

			if(chks[i].className == no){//ID等于传进父目录ID时

				chks[i].checked = chkBox.checked;//保持选中状态和父目录一致

				checkStatus(chks[i].value,chks[i]);//递归保持所有的子目录选中

			}

		}

	}

}



function checkPar(chkBox) {

	if(chkBox.name.toLowerCase() == 'check' && chkBox.checked && chkBox.className != 0) {//判断本单击为选中,并且不是根目录,则选中父目录

		var chkObject = document.getElementById("ch"+chkBox.className);//得到父目录对象

		chkObject.checked=true;

		checkPar(chkObject);

	}

}

</script>
wangzi6hao 2008-12-19
  • 打赏
  • 举报
 回复
首先叹服一下楼上的。
我还在想怎么实现，没想到，楼上的通过这种方法已经解决了。
先谢谢一下。然后贴出改进版。
略改了一下，应该更实用。
<script type="text/javascript" >

dd = new dTree( 'dd ');
dd.add(0,-1, '省市列表 ', ' ');
dd.add(1,0, ' <input type="checkbox" name="check" value="1" id="0" onClick="checkStatus(1,this)">辽宁 ');
dd.add(2,0, ' <input type="checkbox" name="check" value="2" id="0" onClick="checkStatus(2,this)">湖北 ', '');
dd.add(3,0, ' <input type="checkbox" name="check" value="3" id="0" onClick="checkStatus(3,this)">湖南 ', '');
dd.add(4,0, ' <input type="checkbox" name="check" value="4" id="0" onClick="checkStatus(4,this)">江西> ');
dd.add(5,0, ' <input type="checkbox" name="check" value="5" id="0" onClick="checkStatus(5,this)">浙江 ', '');
dd.add(6,5, ' <input type="checkbox" name="check" value="6" id="5" onClick="checkStatus(6,this)">杭州 ', '');
dd.add(7,5, ' <input type="checkbox" name="check" value="7" id="5" onClick="checkStatus(7,this)">嘉兴 ', '');
dd.add(8,4, ' <input type="checkbox" name="check" value="8" id="4" onClick="checkStatus(8,this)">南昌 ', '');
dd.add(9,4, ' <input type="checkbox" name="check" value="9" id="4" onClick="checkStatus(9,this)">九江 ', '');
dd.add(10,4, ' <input type="checkbox" name="check" value="10" id="4" onClick="checkStatus(10,this)">樟树 ', '');
dd.add(11,10, ' <input type="checkbox" name="check" value="11" id="10" onClick="checkStatus(11,this)">樟树 ', '');
dd.add(12,10, ' <input type="checkbox" name="check" value="12" id="10" onClick="checkStatus(12,this)">樟树 ', '');
dd.add(13,12, ' <input type="checkbox" name="check" value="13" id="12" onClick="checkStatus(13,this)">樟树 ', '');
document.write(dd);
function checkStatus(no,chkBox){
var chks = document.getElementsByTagName('input');
for(var i=0;i <chks.length;i++){
if(chks[i].name.toLowerCase() == 'check'){
if(chks[i].id == no){
chks[i].checked = chkBox.checked;
checkStatus(chks[i].value,chks[i]);
}
}
}
}
</script>
lmx8757921 2007-10-26
  • 打赏
  • 举报
 回复
如果考虑所有子节点就要用如下的递归方法.
<script type="text/javascript" >

dd = new dTree( 'dd ');
dd.add(0,-1, '省市列表 ', ' ');
dd.add(1,0, ' <input type="checkbox" name="check" value="0-1" onClick="checkStatus(1,this)">辽宁 ', ' ');
dd.add(2,0, ' <input type="checkbox" name="check" value="0-2" onClick="checkStatus(2,this)">湖北 ', ' ');
dd.add(3,0, ' <input type="checkbox" name="check" value="0-3" onClick="checkStatus(3,this)">湖南 ', ' ');
dd.add(4,0, ' <input type="checkbox" name="check" value="0-4" onClick="checkStatus(4,this)">江西 ');
dd.add(5,0, ' <input type="checkbox" name="check" value="0-5" onClick="checkStatus(5,this)">浙江 ', ' ');
dd.add(6,5, ' <input type="checkbox" name="check" value="5-6" onClick="checkStatus(6,this)">杭州 ', ' ');
dd.add(7,5, ' <input type="checkbox" name="check" value="5-7" onClick="checkStatus(7,this)">嘉兴 ', ' ');
dd.add(8,4, ' <input type="checkbox" name="check" value="4-8" onClick="checkStatus(8,this)">南昌 ', ' ');
dd.add(9,4, ' <input type="checkbox" name="check" value="4-9" onClick="checkStatus(9,this)">九江 ', ' ');
dd.add(10,4, ' <input type="checkbox" name="check" value="4-10" onClick="checkStatus(10,this)">樟树 ', ' ');
dd.add(11,6, ' <input type="checkbox" name="check" value="6-11" onClick="checkStatus(11,this)">西湖区 ', ' ');
document.write(dd);
function checkStatus(no,chkBox){
var chks = document.getElementsByTagName('input');
for(var i=0;i<chks.length;i++){
if(chks[i].type.toLowerCase() == 'checkbox'){
var vals = chks[i].value.split('-');
if(vals[0] == no){
chks[i].checked = chkBox.checked;
checkStatus(vals[1],chks[i]);
}
}
}
}
</script >
lmx8757921 2007-10-26
  • 打赏
  • 举报
 回复
将代码修改如下即可.
<script type="text/javascript" >

dd = new dTree( 'dd ');
dd.add(0,-1, '省市列表 ', ' ');
dd.add(1,0, ' <input type="checkbox" name="check" value="0" onClick="checkStatus(1,this)">辽宁 ', ' ');
dd.add(2,0, ' <input type="checkbox" name="check" value="0" onClick="checkStatus(2,this)">湖北 ', ' ');
dd.add(3,0, ' <input type="checkbox" name="check" value="0" onClick="checkStatus(3,this)">湖南 ', ' ');
dd.add(4,0, ' <input type="checkbox" name="check" value="0" onClick="checkStatus(4,this)">江西 ');
dd.add(5,0, ' <input type="checkbox" name="check" value="0" onClick="checkStatus(5,this)">浙江 ', ' ');
dd.add(6,5, ' <input type="checkbox" name="check" value="5" onClick="checkStatus(6,this)">杭州 ', ' ');
dd.add(7,5, ' <input type="checkbox" name="check" value="5" onClick="checkStatus(7,this)">嘉兴 ', ' ');
dd.add(8,4, ' <input type="checkbox" name="check" value="4" onClick="checkStatus(8,this)">南昌 ', ' ');
dd.add(9,4, ' <input type="checkbox" name="check" value="4" onClick="checkStatus(9,this)">九江 ', ' ');
dd.add(10,4, ' <input type="checkbox" name="check" value="4" onClick="checkStatus(10,this)">樟树 ', ' ');
document.write(dd);
function checkStatus(no,chkBox){
var chks = document.getElementsByTagName('input');
for(var i=0;i<chks.length;i++){
if(chks[i].type.toLowerCase() == 'checkbox'){
if(chks[i].value == no){
chks[i].checked = chkBox.checked;
}
}
}
}
</script >
dtree checkBox
dtree 带checkBox 选中父节点，子节点全选。子节点取消选中，父节点取消，并且此节点保持原有状态
checkBoxTree 树
用 dtree实现的checkBoxtree， 可以实现父节点选中，其子节点全选。如果子节点有一个没选，父节点也不会选中
java项目之oa办公管理系统(java毕业设计)
7、角色模块添加、删除、修改、分页查询、角色绑定以及解绑用户、角色绑定以及解绑操作 8、Spring事务处理机制讲解 9、模块管理增加、修改、删除、分页查询、整合dTree树形插件 10、项目实现权限控制 11、公告模块...
javascript 带checkBox 的tree,可联选
如题,项目中需要,自已修改Dtree的一个...选择节点,即可自动全选子节点,并选中其所有父节点 取消节点,即取消所有子节点 类似权限树 支持IE fireFox 支持cookie保存最后一次的展示状态,即刷新页面后权的展示节点情况保留
dTree树的checkbox 选中父节点，使其子节点都选中
注：topic.csdn.net/u/20071026/10/865b20c... 根据csdn朋友资料修改而来，略修改一下，更实用。 &lt;script type="text/javascript"...dd = new dTree( 'dd '); dd.add(0,-1, '省市列表 ', ' '); d...
Java SE

62,614

社区成员

307,326

社区内容

发帖
与我相关
我的任务
社区描述
Java 2 Standard Edition
社区管理员
  • Java SE
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

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

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

+ 用AI写文章