javascript 控制树型复选框...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
<link type="text/css" href="css/tree.css" rel="stylesheet">
<script language=jscript>
function ChangeStatus(o)
{
if (o.parentNode)
{
if (o.parentNode.className == "Opened")
{
o.parentNode.className = "Closed";
}
else
{
o.parentNode.className = "Opened";
}
}
}
function click_checkbox(obj){
var s=obj.checked;
if(obj.parentNode.getElementsByTagName("ul").length>0){
var objs=obj.parentNode.getElementsByTagName("ul")[0].childNodes;
for(var i=0;i<objs.length;i++){
obj=objs[i].getElementsByTagName("input")[0];
obj.checked=s;
click_checkbox(obj);
}
}
}
</script>
</head>
<body>
<div class="TreeMenu" id="CategoryTree">
<h4>CSS树形菜单</h4>
<ul>
  <li class="Opened"><img class=s src="css/s.gif" onClick="javascript:ChangeStatus(this);"><a href="#">根节点</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)">
  <ul>
    <li class="Opened"><img class=s src="css/s.gif" onClick="javascript:ChangeStatus(this);"><a href="#">我的文档</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)">
  <ul>
       <li class="Opened"><img class=s src="css/s.gif" onClick="javascript:ChangeStatus(this);"><a href="#">JavaScript</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)" />
    <ul>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">1</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">2</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">3</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">4</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">5</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">6</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
     <li class="Child"><img class=s src="css/s.gif"><a href="#">生成node</a><input name="" type="checkbox" value="" onclick="click_checkbox(this)"></li>
    </ul></li>
</ul>
</div>
</body>
</html>

解决方案 »

  1.   

    谢谢.推荐几本javascript的书我吧...谢谢哦
      

  2.   

    承蒙看得起，下面意见紧供参考
    个人见解：
    js象其他所有语言一样，只是一个工具，而js更具体些就是一个编写网页的工具。如果我们把一个网页作品看成是一个建筑的话，而成就这座建筑的就是材料（html元素），而水泥钢筋则将这些材料牢牢地捆在一起（js）,当然要使其美观少不了一些装饰材料（css），偶尔也会来一个新颖的布局（htc）。
    所以我觉得这几样应该结合起来看。
    推荐资料：dhtml.chm（网页制作完全手册）
    JavaScript.chm（JScript 语言参考）
    平时多练习，会成功的！
      

  3.   

    我来写个：
    <script language=jscript>
    var obj,objects;
    window.onload=init;
    function init(){
    objects=document.getElementsByTagName("input")
    for(i=0;i<objects.length;i++){
    objects[i].onclick=function(){CheckClick(this)};
    }
    }function CheckClick(o){
    obj=o.parentNode.parentNode.parentNode
    if(obj.tagName=="UL"){
    aa(obj,o.checked);
    }
    }function aa(o,str){
    if(o.childNodes.length>0){
    for(var i=0;i<o.childNodes.length;i++){
    aa(o.childNodes[i],str)
    }
    }
    else{
    if(o.type=="checkbox"){
    o.checked=str
    }
    }
    }
    </script>