求asp树状checkbox的问题！

求asp树状的checkbox
效果类似：
<HTML>   
  <HEAD>   
  <TITLE>   emu's   test   of   simple   tree</TITLE>   
  <SCRIPT   LANGUAGE="JavaScript">   
  <!--   
  function   checkSelect(){   
  var   elm   =   event.srcElement.parentNode;   
  checkChildrenRecurve(elm);   
  checkRootRecurve(document.getElementById("root"));   
  }   
  function   checkChildrenRecurve(elm){   
  var   li   =   elm.parentNode;   
  var   ul   =   li.lastChild;   
  if   (ul.tagName   !=   "UL")   return;   
  var   lis   =   ul.children;   
  for   (var   i=0;i<lis.length;i++){   
  lis[i].firstChild.firstChild.checked=elm.firstChild.checked;   
  checkChildrenRecurve(lis[i].firstChild)   
  }   
  }   
  function   checkRootRecurve(ul){   
  if   (ul.tagName   !=   "UL")   {   
  ul.parentNode.firstChild.firstChild.allChecked   =   ul.parentNode.firstChild.firstChild.checked;   
  ul.parentNode.firstChild.firstChild.allUnChecked   =   !ul.parentNode.firstChild.firstChild.checked;   
  return;   
  }   
  var   lis   =   ul.children;   
  var   allChecked   =   true;   
  var   allUnChecked   =   true;   
  for   (var   i=0;i<lis.length;i++){   
  checkRootRecurve(lis[i].lastChild);   
  allChecked   =   allChecked   &&   lis[i].firstChild.firstChild.checked   &&   lis[i].firstChild.firstChild.allChecked;   
  allUnChecked   =   allUnChecked   &&   !lis[i].firstChild.firstChild.checked   &&   lis[i].firstChild.firstChild.allUnChecked;   
  }   
  ul.parentNode.firstChild.firstChild.allChecked=allChecked;   
  ul.parentNode.firstChild.firstChild.allUnChecked=allUnChecked;   
  if   (allChecked   ||   allUnChecked){   
  ul.parentNode.firstChild.firstChild.checked=allChecked;   
  ul.parentNode.firstChild.firstChild.disabled=false;   
  ul.parentNode.firstChild.childStatus=false;   
  }else{   
  ul.parentNode.firstChild.firstChild.disabled=true;   
  ul.parentNode.firstChild.childStatus=true;   
  ul.parentNode.firstChild.firstChild.checked=true;   
    
  }   
  }   
    
  function   enableFirstChild(){   
  this.childStatus   =   this.firstChild.disabled;   
  this.firstChild.disabled=false;   
  }   
  function   recoverFirstChild(){   
  this.firstChild.disabled   = this.childStatus;   
  }   
  function   init(){   
  var   elms   =   document.getElementsByTagName("INPUT");   
  for   (var   i=0;i<elms.length;i++)   
  elms[i].onclick=checkSelect;   
  var   elms   =   document.getElementsByTagName("SPAN");   
  for   (var   i=0;i<elms.length;i++){   
  elms[i].onmouseover=enableFirstChild;   
  elms[i].onmouseout=recoverFirstChild;   
  }   
  }   
    
  //-->   
  </SCRIPT>   
  </HEAD>   
    
  <BODY   onload="init()">   
  <div>   
  <span><input   type=checkbox></span>   
  <UL   id=root>   
  <LI><span><input   type=checkbox></span>   
  <UL>   
  <LI><span><input   type=checkbox></span>   
  <UL>   
  <LI><span><input   type=checkbox></span>   
  <LI><span><input   type=checkbox></span>   
  </UL>   
  <LI><span><input   type=checkbox></span>   
  <UL>   
  <LI><span><input   type=checkbox></span>   
  <LI><span><input   type=checkbox></span>   
  </UL>   
  </UL>   
  <LI><span><input   type=checkbox></span>   
  <UL>   
  <LI><span><input   type=checkbox></span>   
  <UL>   
  <LI><span><input   type=checkbox></span>   
  <LI><span><input   type=checkbox></span>   
  </UL>   
  <LI><span><input   type=checkbox></span>   
  <UL>   
  <LI><span><input   type=checkbox></span>   
  <LI><span><input   type=checkbox></span>   
  </UL>   
  </UL>   
  </UL>   
  </div>   
  </BODY>   
  </HTML>   不过他初始化的时候没有隐藏相关子项目，不知道这么搞
关键是点击父项要显示子项目，再次点击要关闭
请求各位高手献策！