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

http://expert.csdn.net/Expert/topic/1277/1277486.xml?temp=.2291071倒数第3个回复

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

<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>
效率的话，应该是用htc比较快，因为他可以做到局部遍历但是htc本身也是占资源的，如果绑定htc的element特别多的话
效率也会降下来（在页面装载的时候）参见
http://expert.csdn.net/Expert/topic/1220/1220815.xml?temp=.6736414
代码如下：
你点击就会发现在树没有展开的时候只有下一级被选中，而下一级的下一级就不能选中了,我想让所有的下级都选中<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>
你帖出来的代码无法调试啊，我没有看见树，就看到一个checkbox呀，点了也没有效果
其实htc是会自动处理他的所有下级，下下级，下下下级element的还有你的代码写得不是很规范，为一个div设一个自定义属性可以这样：div1.setAttribute("check","true")或者简单的
<input type=checkbox onclick="div1.check=this.checked">
看看http://y8y9.y365.com/tmp/div.htm
树是没有展开的，因为没有发图片，所以你看不到+号，你可以在checkbox前面点一下树就展开了在树展开的时候没有问题，都能选中，就是在树没有展开的时候只能选中下一级，下下一级……就不行了
修改 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>