实现的功能难吗？

怎么附件看不了...<table width="50%" border="0" cellpadding="0" cellspacing="1" bgcolor="#0066CC">
  <tr>
    <td height="30"><input type="CheckBox" name="id" ID="1" value="1">
      一级栏目1 </td>
  </tr>
  <tr>
    <td height="17" bgcolor="#FFFFFF"><table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
        <tr>
          <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="1" />
            子栏目1（二级栏目）</td>
        </tr>
        <tr>
          <td height="17" bgcolor="#FFFFFF"><table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
              <tr>
                <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="1" />
                  子栏目1</td>
              </tr>
              <tr>
                <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="2" />
                  子栏目2</td>
              </tr>
            </table></td>
        </tr>
        <tr>
          <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="2" />
            子栏目2</td>
        </tr>
        <tr>
          <td height="17" bgcolor="#FFFFFF"><table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
              <tr>
                <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="1" />
                  子栏目1</td>
              </tr>
              <tr>
                <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="2" />
                  子栏目2</td>
              </tr>
            </table></td>
        </tr>
      </table></td>
  </tr>
  <tr>
    <td height="30"><input type="CheckBox" name="id" ID="1" value="2">
      一级栏目2</td>
  </tr>
  <tr>
    <td height="17" bgcolor="#FFFFFF"><table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
        <tr>
          <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id2" id="id" value="1" />
            子栏目1 </td>
        </tr>
        <tr>
          <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="id" value="2" />
            子栏目2 </td>
        </tr>
      </table></td>
  </tr>
</table><br><br>
需要实现的功能为： 全选，全不选；
选那个子栏目后自动选中该子栏目的父级栏目；
选父级栏目后自动选中该父级下面的所有子栏目。

解决方案 »

  1.   

    先搞清楚parentNode ,childNode
    再发问吧  var RegEvent = function(){
    var chs = document.getElementsByTagName("input");
    if(chs.length > 0)
    {
    for(var i=0;i<chs.length;i++)
    {
    if(chs[i].type == "checkbox")
    {
    chs[i].onclick = function(){
    return Main(this);
    };
    }
    }
    }
    };
      

  2.   

    function checkAll()
    {
     var checkBox = document.getElementsByName("input");
     for (var i = 0; i < checkBox.length; i++)
     {
      var temp = checkBox[i];
      temp.checked = true;
     }
    }
      

  3.   

    改了下你的结构和checkbox的id,注意checkbox的id命名方法<html> 
    <head> 
    <title>Selected</title> 
    <script   language="javascript">
    document.onclick=Handler;
    function Handler(e)
    {
       e=e||event;
       var tag=e.srcElement||e.target;
       if(tag.type)
       {
          if(tag.type=="checkbox")
          {
             getCheck(tag);
          }
       }
    }
    function getCheck(tag)
    {
      var levs=tag.id.replace("level","").split("_");
      var NowLev=levs.length;
      if(NowLev>2)//没有选择一级目录
      {
        setParents(NowLev,levs,tag);
      }
      setChilds(tag.parentNode.getElementsByTagName("input"),tag);
    }
    function setParents(NowLev,levs,tag)
    {
       while(NowLev>2)
       {
         var pid="level1";
         for(var i=1;i<NowLev-1;i++)
         {
           pid+="_"+levs[i]
         }
         document.getElementById(pid).checked=true;
         NowLev--;
       }
    }
    function setChilds(childs,tag)
    {
      for(var i=0;i<childs.length;i++)
      {
         if(childs[i].type&&childs[i].type=="checkbox"&&childs[i]!=tag)
         {
            childs[i].checked=tag.checked;
         }
      }
    }
    </script> 
    </head> 
    <body> 
    <table width="50%" border="0" cellpadding="0" cellspacing="1" bgcolor="#0066CC">
      <tr>
        <td height="30"><input type="checkbox" name="id" ID="level1_1" value="1">
          一级栏目1
          <table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
            <tr>
              <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_1_1" value="1" />
                子栏目1（二级栏目）
                <table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
                  <tr>
                    <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_1_1_1" value="1" />
                      子栏目1</td>
                  </tr>
                  <tr>
                    <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_1_1_2" value="2" />
                      子栏目2</td>
                  </tr>
                </table>
                 </td>
            </tr>       
            <tr>
              <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_1_2" value="2" />
                子栏目2
                <table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
                  <tr>
                    <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_1_2_1" value="1" />
                      子栏目1</td>
                  </tr>
                  <tr>
                    <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_1_2_2" value="2" />
                      子栏目2</td>
                  </tr>
                </table></td>
            </tr>       
          </table>
           </td>
      </tr>
     
      <tr>
        <td height="30"><input type="CheckBox" name="id" ID="level1_2" value="2">
          一级栏目2
          <table width="95%" border="0" align="right" cellpadding="0" cellspacing="1" bgcolor="#0066CC" style="margin-bottom:5px; margin-top:5px; margin-left:15px; margin-right:5px">
            <tr>
              <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id2" id="level1_2_1" value="1" />
                子栏目1 </td>
            </tr>
            <tr>
              <td height="20" bgcolor="#FFFFFF"><input type="checkbox" name="id" id="level1_2_2" value="2" />
                子栏目2 </td>
            </tr>
          </table></td>
      </tr>
     
    </table></body> 
    </html> 
      

  4.   

    谢谢 showbo ，请问怎么获取所选的值...最后获取的值结果是：1，5，3，6，形式的。
      

  5.   

    加上下面的代码
    <script> 
    function getCheckValue()
    {
      var cbs=document.getElementsByTagName("input");
      var v="";
      for(var i=0;i<cbs.length;i++)
      { 
        if(cbs[i].type=='checkbox'&&cbs[i].checked)
        {
          v+=cbs[i].value+","; 
        }
      }
      if(v!="")  v=v.substring(0,v.length-1);
      alert(v);
    }
    </script> 
    <input type="button" value="getCheckValue" onclick="getCheckValue()"/>
      

  6.   

    谢谢   showbo   马上接帖