不遍历整个表单，怎样取得上的表单元素checkbox的值？

[awaysrain]

下面的代码为一棵树形菜单，我想点上一级的时候，让下一级的所有checkbox选中，
因为数据量很大，能不能不遍历整个表单实现？或者有没有方法实现？

<FORM name=form1>
<DIV id=cItem>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap><IMG class=cItem id=Out102 style="CURSOR: hand" height=9
src="tree.files/Closed.gif" width=9><INPUT onclick='SetOpt1("102")'
type=checkbox value=cbzy（2002） name=checkbox102>
<A style="CURSOR: hand"
onclick='SetOpt("102")'>11</A></TD>
</TR></TBODY></TABLE>
<DIV id=Out102a style="DISPLAY: none">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>  <IMG class=cItem id=Out102001 style="CURSOR: hand"
height=9 src="tree.files/Closed.gif" width=9><INPUT
onclick='SetOpt1("102001")' type=checkbox value=cb
name=checkbox102001>
<A style="CURSOR: hand"
onclick='SetOpt("102001")'>1111</A></TD>
</TR></TBODY></TABLE>
<DIV id=Out102001a style="DISPLAY: none">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>    <IMG class=cItem id=Out102001001
style="CURSOR: hand" height=9 src="tree.files/Closed.gif" width=9><INPUT
onclick='SetOpt1("102001001")' type=checkbox value=lx（100dfd及以上）
name=checkbox102001001>
<A style="CURSOR: hand"
onclick='SetOpt("102001001")'>111111</A></TD>
</TR></TBODY></TABLE>
<DIV id=Out102001001a style="DISPLAY: none">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>      <IMG class=cItem
id=Out102001001001 style="CURSOR: hand" height=9
src="tree.files/Closed.gif" width=9><INPUT
onclick='SetOpt1("102001001001")' type=checkbox value=合计（4）
name=checkbox102001001001>
<A style="CURSOR: hand"
onclick='SetOpt("102001001001")'>111111</A></TD>
</TR></TBODY></TABLE>
<DIV id=Out102001001001a style="DISPLAY: none">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>        <IMG height=9
src="tree.files/end.gif" width=9><INPUT type=checkbox value=__df
name=checkbox102001001001001>
<A style="CURSOR: hand"
onclick='SetOpt2("102001001001001")'>11111111</A></TD>
</TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>        <IMG height=9
src="tree.files/end.gif" width=9><INPUT type=checkbox value=__dfd
name=checkbox102001001001002>
<A style="CURSOR: hand"
onclick='SetOpt2("102001001001002")'>11111112</A></TD>
</TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>        <IMG height=9
src="tree.files/end.gif" width=9><INPUT type=checkbox value=__dawdfd
name=checkbox102001001001003>
<A style="CURSOR: hand"
onclick='SetOpt2("102001001001003")'>11111113</A></TD>
</TR></TBODY></TABLE></DIV>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>      <IMG class=cItem
id=Out102001001002 style="CURSOR: hand" height=9
src="tree.files/Closed.gif" width=9><INPUT
onclick='SetOpt1("102001001002")' type=checkbox value=其中：afsadfd（5）
name=checkbox102001001002>
<A style="CURSOR: hand"
onclick='SetOpt("102001001002")'>111112</A></TD>
</TR></TBODY></TABLE>
<DIV id=Out102001001002a style="DISPLAY: none">
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>        <IMG height=9
src="tree.files/end.gif" width=9><INPUT type=checkbox value=__afsadfddf
name=checkbox102001001002001>
<A style="CURSOR: hand"
onclick='SetOpt2("102001001002001")'>11111211</A></TD>
</TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>        <IMG height=9
src="tree.files/end.gif" width=9><INPUT type=checkbox value=__afsadfddfd
name=checkbox102001001002002>
<A style="CURSOR: hand"
onclick='SetOpt2("102001001002002")'>11111212</A></TD>
</TR></TBODY></TABLE>
<TABLE cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD noWrap>        <IMG height=9
src="tree.files/end.gif" width=9><INPUT type=checkbox value=___afsadfddawdfd
name=checkbox102001001002003>
<A style="CURSOR: hand"
onclick='SetOpt2("102001001002003")'>11111213</A></TD>
</TR></TBODY></TABLE></DIV>
</DIV>
</DIV></DIV></DIV></FORM>

[Go_Rush]

http://expert.csdn.net/Expert/topic/1277/1277486.xml?temp=.2291071

倒数第3个回复

[awaysrain]

非常感谢，我先去试试

[wsj]

<script>
function SetOpt(id)
{
var oDiv = eval("Out"+id+"a");
oDiv.style.display = oDiv.style.display=="none"?"block":"none";
}
function SetOpt1(id)
{
var oDiv = eval("Out"+id+"a");
var colls=oDiv.getElementsByTagName("INPUT");
var collnum=colls.length;
for(var i=0;i<collnum;i++){
if (colls[i].type.toLowerCase()==event.srcElement.type.toLowerCase=="checkbox"))
colls[i].checked=event.srcElement.checked;
}
}
</script>
<FORM name=form1>
<DIV id=cItem>
<TABLE cellSpacing=0 ...

[希默软件]

这样就不遍历了，可是效率很低

<style>
input {color:black}
</style>
<div id=a1>
<input type=text value=1>
<input type=checkbox value=2>
<input type=checkbox value=3>
<input type=checkbox value=4>
</div>
<div id=a2>
<input type=text value=5>
<input type=checkbox value=6>
<input type=checkbox value=7>
<input type=checkbox value=8>
</div>
<input type=checkbox value=9>
<input type=checkbox value=10>
<br>
<input type=button value=Choise onclick=change("document.all.a1")>
<input type=button value=Choise onclick=change("document.all.a2")>
<script>
function change(obj){
document.styleSheets[0].addRule("INPUT","bc:expression((this.type=='checkbox'&&"+obj+".contains(this))?this.checked=(!this.checked):'')",0);
document.styleSheets[0].removeRule(1);
}
</script>

[awaysrain]

我的目的不是是否遍历，关键是效率
不想遍历是因为数据量很大

[Go_Rush]

效率的话，应该是用htc比较快，因为他可以做到局部遍历

但是htc本身也是占资源的，如果绑定htc的element特别多的话
效率也会降下来（在页面装载的时候）

参见
http://expert.csdn.net/Expert/topic/1220/1220815.xml?temp=.6736414

[awaysrain]

代码如下：
你点击就会发现在树没有展开的时候只有下一级被选中，而下一级的下一级就不能选中了,我想让所有的下级都选中

<HTML>
<HEAD>
<TITLE></TITLE>
<link rel='stylesheet' type='text/css' href='style.css'>
<STYLE TYPE="text/css">div{behavior:url('div.htc')}</STYLE>
<script language="JavaScript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"></HEAD>
<BODY bgcolor="#f4faf6" leftMargin=0 topMargin=0>
<DIV id=cItem><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap><img src=Images/Closed.gif id=Out102 class=cItem width=9 height=9><INPUT type=checkbox onClick="Out102a.check=((Out102a.check)?false:true)")>102</td></tr></table><div id=Out102a style=display:None><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>  <img src=Images/Closed.gif id=Out102001 class=cItem width=9 height=9><INPUT type=checkbox onClick="Out102001a.check=((Out102001a.check)?false:true)")>102001</td></tr></table><div id=Out102001a style=display:None><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>    <img src=Images/Closed.gif id=Out102001001 class=cItem width=9 height=9><INPUT type=checkbox onClick="Out102001001a.check=((Out102001001a.check)?false:true)")>102001001</td></tr></table><div id=Out102001001a style=display:None><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>      <img src=Images/Closed.gif id=Out102001001001 class=cItem width=9 height=9><INPUT type=checkbox onClick="Out102001001001a.check=((Out102001001001a.check)?false:true)")>102001001001</td></tr></table><div id=Out102001001001a style=display:None><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>        <img src=Images/end.gif width=9 height=9><INPUT type=checkbox>102001001001001</td></tr></table><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>        <img src=Images/end.gif width=9 height=9><INPUT type=checkbox>102001001001002</td></tr></table><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>        <img src=Images/end.gif width=9 height=9><INPUT type=checkbox>102001001001003</td></tr></table></div><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>      <img src=Images/Closed.gif id=Out102001001002 class=cItem width=9 height=9><INPUT type=checkbox onClick="Out102001001002a.check=((Out102001001002a.check)?false:true)")>102001001002</td></tr></table><div id=Out102001001002a style=display:None><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>        <img src=Images/end.gif width=9 height=9><INPUT type=checkbox>102001001002001</td></tr></table><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>        <img src=Images/end.gif width=9 height=9><INPUT type=checkbox>102001001002002</td></tr></table><table border=0 cellpadding=0 cellspacing=0 width=100%><tr><td nowrap>        <img src=Images/end.gif width=9 height=9><INPUT type=checkbox>102001001002003</td></tr></table></div></div></div></div></DIV>
<script>
function DynamicFunc()
{
var tID, sTAG, tTag;
sTAG = window.event.srcElement;
if (sTAG.className == "cItem")
{
tID = sTAG.id + "a";
tTag = document.all(tID);
if (tTag.style.display == "none")
{
tTag.style.display = "";
sTAG.src = "Images/Opened.gif";
}
else
{
tTag.style.display = "none";
sTAG.src = "Images/Closed.gif";
}
}
}
cItem.onclick = DynamicFunc;
</script>
</BODY>
</HTML>

-----------------------
div.htc
---------------------------------
<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="element.init()" />
<PUBLIC:METHOD NAME="init" />
<PUBLIC:PROPERTY NAME="check" />
<SCRIPT>
function init(){
element.attachEvent("onpropertychange",doSelect);
doSelect();
}

function doSelect(){
var colls=element.getElementsByTagName("INPUT");
var collnum=colls.length;
for(var i=0;i<collnum;i++){
if (!/checkbox/i.test(colls[i].type)) continue;
colls[i].checked=(check)?true:false;
}
}
</SCRIPT>
</PUBLIC:COMPONENT>

[Go_Rush]

你帖出来的代码无法调试啊，

我没有看见树，就看到一个checkbox呀，点了也没有效果


其实htc是会自动处理他的所有下级，下下级，下下下级element的

还有你的代码写得不是很规范，为一个div设一个自定义属性可以这样：

div1.setAttribute("check","true")或者简单的
<input type=checkbox onclick="div1.check=this.checked">


看看

http://y8y9.y365.com/tmp/div.htm

[awaysrain]

树是没有展开的，因为没有发图片，所以你看不到+号，你可以在checkbox前面点一下树就展开了

在树展开的时候没有问题，都能选中，就是在树没有展开的时候只能选中下一级，下下一级……就不行了

[Go_Rush]

修改 htc文件即可

修改后的 htc



<PUBLIC:COMPONENT>
<PUBLIC:ATTACH EVENT="oncontentready" ONEVENT="element.init()" />
<PUBLIC:METHOD NAME="init" />
<PUBLIC:PROPERTY NAME="check" />
<SCRIPT>
function init(){
element.attachEvent("onpropertychange",doSelect);
doSelect();
}

function doSelect(){
var colls=element.getElementsByTagName("INPUT");
var collnum=colls.length;
for(var i=0;i<collnum;i++){
if (!/checkbox/i.test(colls[i].type)) continue;
colls[i].checked=(check)?true:false;
}

colls=element.getElementsByTagName(element.tagName);
collnum=colls.length;
for(var i=0;i<collnum;i++){colls[i].check=check;}

}
</SCRIPT>
</PUBLIC:COMPONENT>

[awaysrain]

我的页面不会每次都转载的，一般只在打开的时候下载，放在一个框架里

[awaysrain]

OK，问题解决了，非常感谢