当我点一个树的某一个结点时其子结点也相应的选上怎么实现下面是我的程序

main.js
var Menu = {
//version of this script.
Version : '1.0',

//author of this script
   Author : 'Chenghaojun',
  
   //finished date.
   Date : '2008-12-16',
  
   //oprated object.
   tagObj : null,
  
   //header images
   images : {
closed : "__closed.gif",
opened : "__opened.gif"
   },
  
   //push all checked checkbox to this array.
   checked : [],
   $ : function(s){
var o = (typeof(s) == "string") ? (document.getElementById(s)): s;
try{
return o;
} finally {
o = null;
}
},
init : function(_obj){
if(this.tagObj == null){
this.tagObj = this.$(_obj);
}
if(this.tagObj == null){
alert("the menu is not initialized conrectly!");
return;
}
var _childNodes = this.tagObj.childNodes;
for(var i=0, j=_childNodes.length; i<j; i++) {
//给checkbox注册事件
var checkboxs = this.regCheckbox(_childNodes[i]);
}
this.regLi(this.tagObj);
},
regLi : function(_tagObj){
var _childNodes = _tagObj.childNodes;
for(var i=0, j=_childNodes.length; i<j; i++) {
if(!_childNodes[i]){
continue;
}
if(!_childNodes[i].tagName){
continue;
}
if(_childNodes[i].tagName.toLowerCase() == "li"){
var img = document.createElement('IMG');
img.src = Menu.images.closed;
img.style.cursor = "pointer";
_childNodes[i].insertBefore(img,_childNodes[i].childNodes[0]);
img.onclick = this.openNext;
}
if(typeof _childNodes[i] == "object"){
this.regLi(_childNodes[i]);
}
}
},

openNext : function(e){
var _e = window.event || e;
var _obj = _e.srcElement || _e.target;
var _parentNode = _obj.parentNode;
if(!_parentNode)
return;
if(!_obj.src || _obj.src.indexOf(Menu.images.closed) != -1){
_obj.src = Menu.images.opened;
}else{
_obj.src = Menu.images.closed;
}
var _parentNodeChildNodes = _parentNode.childNodes;
var node = null;
for(var i=0, j=_parentNodeChildNodes.length; i<j; i++) {
node = _parentNodeChildNodes[i];
if(!node || node == null){
continue;
}
if(!node.tagName){
continue;
}
if(node.tagName.toLowerCase() == "ul"){
if(node.style.display == 'block'){
node.style.display = 'none';
}else{
node.style.display = 'block';
}
}
}
},

regCheckbox : function(e){
ME = this;
if (e.childNodes.length == 0) {
return null;
}
for(var i=0,j=e.childNodes.length; i<j; i++) {
with(e.childNodes[i]){
var _tagName = e.childNodes[i].tagName;
if(!_tagName){
continue;
}
if ("INPUT" == _tagName) {
if(type == "checkbox"){
onclick = function (){
if(this.checked){
ME.check(this.parentNode);
}else{
ME.uncheck(this.parentNode);
}
};
}
}
if(_tagName == "UL" || _tagName == "LI"){
this.regCheckbox(e.childNodes[i]);
}
}
}
},
check : function(e){
if(e.childNodes.length > 0){
for(var i=0,j=e.childNodes.length; i<j; i++) {
if(e.childNodes[i].type == "checkbox"){
if(e.childNodes[i].checked == false){
e.childNodes[i].checked = true;
}
}
}
}
if(!e.tagName || e.tagName == "BODY"){
return;
}
if(e.tagName == "LI" || e.tagName == "UL"){
this.check(e.parentNode);
}
},
uncheck : function(e){
if(e.childNodes.length == 1){
this.uncheck(e.childNodes[e.childNodes.length-1]);
}else{
for(var i=0,j=e.childNodes.length; i<j; i++) {
if(e.childNodes[i].type == "checkbox"){
if(e.childNodes[i].checked == true){
e.childNodes[i].checked = false;
}
}
if(e.childNodes[i].tagName == "UL" || e.childNodes[i].tagName == "LI"){
this.uncheck(e.childNodes[i]);
}
}
}
},
compute : function(_name){
var _checks = document.getElementsByName(_name);
if(_checks.length != 0){
this.checked.length = 0;
}
for(var i=0,j=_checks.length; i<j; i++) {
if(_checks[i].value == null || _checks[i].checked == false){
continue;
}
this.checked.push(_checks[i].value);
}
return this.checked;
}
}tree.jsp
<%@ page contentType="text/html; charset=GBK" language="java" import="java.sql.*" errorPage="" %>
<%@ page language="java" import="java.util.*" %>
<%@ page language="java" import="com.util.*" %>
<%@ page language="java" import="com.model.*" %>
<%@ page language="java" import="com.service.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TreeTest</title>
<script type="text/javascript" src="menu.js"></script>
<style type="text/css">
.menuTree{
background:#F6F6EC;
width:100%;
font-size:12px;
border: 1px solid #D8D7B5;
overflow:auto;
line-height:14px;
float: left;
}

.menuTree ul,li{
margin-left:20px;
list-style: none;
}

.menuTree li{
/*border-left:1px dashed #000000;*/
}

.menuTree span{
cursor: pointer;
}

.menuBorder{
width:48%;
height:350px;
float: left;
}

.msg {
font-size: 12px;
font-weight:normal;
}
</style>
</head>
<body>
<div id="content">
<div id="notice">
<ul id="noteHeader" title="点击查看或隐藏提示信息">
<li onclick="showNotes();">&nbsp;</li>
</ul>
<ul id="noteDetails">
<div id="xsnazzy"> <b class="xtop"><b class="xb1"></b><b class="xb2"></b><b class="xb3"></b><b class="xb4"></b></b>
<div class="xboxcontent">
<p>选中某节点时，会选中其所有的上级权限。</p>
<p>取消某节点时，会取消其所有的下级权限。</p>
</div>
<b class="xbottom"><b class="xb4"></b><b class="xb3"></b><b class="xb2"></b><b class="xb1"></b></b> </div>
</ul>
</div> <form id="_form" action="tree/servlet/addToDateSer" name="_form" method="post"
enctype="application/x-www-form-urlencoded">
<div class="menuTree">
<ul id="menu" class="flipMenu">
<%//根结点
    AllQuery aq = new AllQuery();
         List tree_list = aq.GetTreeTest();
         for(int i=0;i<tree_list.size();i++){
         TreeTest tt = (TreeTest)tree_list.get(i);
     %>
<li>
<input type="hidden" name="id1" value="<%=tt.getChildID() %>"/>
<input type="hidden" name="ChannelName1" value="<%=tt.getChildName() %>"/>
<input type="checkbox" id="0_1" name="_checkbox" value="1" #checked level="1"/>
<span id="0_s_1"><%=tt.getChildName() %></span>
<ul style="display:none;">

     <%//一级子节点
    AllQuery aq1 = new AllQuery();
         List tree_list1 = aq1.GetTreeTestc2(Integer.parseInt(tt.getChildID()));
         for(int ii=0;ii<tree_list1.size();ii++){
         TreeTest tt1 = (TreeTest)tree_list1.get(ii);
    %>
<li>
<input type="hidden" name="id2" value="<%=tt1.getChildID() %>"/>
<input type="hidden" name="ChannelName2" value="<%=tt1.getChildName() %>"/>
<input type="checkbox" id="2_5" name="_checkbox" value="5" #checked level="2"/>
<span id="2_s_5"><%=tt1.getChildName() %></span>
<ul style="display:none;">
     <%//二级子节点
    AllQuery aq2 = new AllQuery();
         List tree_list2 = aq2.GetTreeTestc2(Integer.parseInt(tt1.getChildID()));
         for(int iii=0;iii<tree_list2.size();iii++){
         TreeTest tt2 = (TreeTest)tree_list2.get(iii);
    %>
<li>
<input type="hidden" name="id3" value="<%=tt2.getChildID() %>"/>
<input type="hidden" name="ChannelName3" value="<%=tt2.getChildName() %>"/>
<input type="checkbox" id="3_7" name="_checkbox" value="7" #checked level="3"/>
<span id="3_s_7"><%=tt2.getChildName() %></span>
<ul style="display:none;">
     <%//三级子节点
    AllQuery aq3 = new AllQuery();
         List tree_list3 = aq3.GetTreeTestc2(Integer.parseInt(tt2.getChildID()));
         for(int iiii=0;iiii<tree_list3.size();iiii++){
         TreeTest tt3 = (TreeTest)tree_list3.get(iiii);
    %>
<li>
<input type="hidden" name="id4" value="<%=tt3.getChildID() %>"/>
<input type="hidden" name="ChannelName4" value="<%=tt3.getChildName() %>"/>
<input type="checkbox" id="4_25" name="_checkbox" value="25" #checked level="4"/>
<span id="4_s_25"><span id="3_s_7"><%=tt3.getChildName() %></span></span>
</li>
<%} %>
</ul>
</li>
<%} %>
</ul>
</li>
<%} %>
</ul>
</li>
<%} %>
</ul>

</div>
<div><input type="submit" value="确定"/><input type="reset" value="取消"/></div>
</form>
</div>
</body>
<script type="text/javascript">
Menu.init('menu');
</script>
</html>还有就是这个树当数据多时显示慢