请问怎么用java script开发一个树，100分,急

<style type='text/css'>
.d {font : size 10pt;}
.child {display : none}
</style><script language="JavaScript">function init()
{  divnum=document.all.tags("DIV");
   for (i=0; i<divnum.length ; i++)
      {
          if (divnum(i).className=="child" ) { 
             divnum(i).style.display="none";
         }
   }
}function expandIt(KB)
{  whichchild=eval(KB+"Child");
   if (whichchild.style.display=="none") {
           
            whichchild.style.display = "block";
          }
    else {   whichchild.style.display = "none";
       }
  
}
 </script>
<body onload=init()>
        
      <div id="KB1Parent" class="parent"> 　
           <a href="#" onClick="expandIt('KB1'); " class="d"><img src="img/midnodeline.gif" border="0">
<img src="img/clsfld.gif" border="0">文件夹一</a></div>
      <div id="KB1Child" class="child"> 
                　<a href="sample.htm" target="_blank" >页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
      <div id="KB2Parent" class="parent">
       　　<a href="#" onClick="expandIt('KB2'); " ><img src="img/midnodeline.gif" border="0">
<img src="img/clsfld.gif" border="0">文件夹二</a></div>
      <div id="KB2Child" class="child">　　　
              　　<a href="sample.htm" target="_blank" >页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
      <div id="KB3Parent" class="parent">
       　　<a href="#" onClick="expandIt('KB3'); " ><img src="img/midnodeline.gif" border="0">
<img src="img/clsfld.gif" border="0">文件夹三</a></div>
      <div id="KB3Child" class="child"> 　　
             　　 <a href="sample.htm" target="_blank" >页面一</a><br>
        　　　　　<a href="sample.htm" target="_blank" >页面二</a><br>
        　　　　　<a href="sample.htm" target="_blank" >页面三</a></div>
</body>再在叶子前加上复选框，复选框的value应该有所不同。