javascript实现选择一个复选框对应行的复选框全部选中问题(急)


<html>
<head>
<title>
</title>
</head><body bgcolor="#ffffff"><form  name="form1" action="" method="POST">
<table style="TABLE-LAYOUT: fixed" cellspacing="0" cellpadding="0" border="1" width="100%" id="powertable" name="powertable" bordercolor="#BBB555">
  <tr>
    <td colspan="2"><div align="center"><strong>材料</strong></div></td>
    <td colspan="2"><div align="center"><strong>设备</strong></div></td>
  </tr>
  <tr>
    <td><div align="center"><strong>区域</strong></div></td>
    <td><div align="center"><strong>层</strong></div></td>
    <td><div align="center"><strong>区域</strong></div></td>
    <td><div align="center"><strong>层</strong></div></td>
  </tr>
  <tr>
    <td>   
       <input type="checkbox" name="C_QYMC"  value="监控中心" onClick="chkRow(this)">监控中心  
    </td>
    <td>
       <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层<br>
    </td>
    <td>
       <input type="checkbox" name="C_QYMC"  value="监控中心" onClick="chkRow(this)">监控中心
    </td>
    <td>
       <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层<br>
    </td>
  </tr>
  <tr>
    <td>
       <input type="checkbox" name="C_QYMC"  value="楼内" onClick="chkRow(this)">楼内
    </td>
    <td>
       <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层<br>
     
       <input type="checkbox" name="C_SSCS"  value="地上2层">地上2层<br>
     
       <input type="checkbox" name="C_SSCS"  value="地上3层">地上3层<br>    </td>
    <td>
       <input type="checkbox" name="C_QYMC"  value="楼内" onClick="chkRow(this)">楼内
    </td>
    <td>
       <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层<br>
     
       <input type="checkbox" name="C_SSCS"  value="地上2层">地上2层<br>
     
       <input type="checkbox" name="C_SSCS"  value="地上3层">地上3层<br>
       </td>
  </tr>
</table>
</form>
</body></html>
上面的代码想实现的功能是,选中区域里的复选框,对应层的复选框全部选中.例如:选择了材料里的楼内复选框,对应材料的地上1层,地上2层,地上3层 ...全部选中.先谢谢高手的指点.很急啊!!!!

解决方案 »

  1.   

    快下班了,仓促写的,有bug再说<html>
        <head>
            <title>
            </title>
            <script>
                function chkRow(e){
                    var obj=e.srcElement||e.target;
                    var ifcheck=obj.checked;
                    var tr=obj.parentNode.parentNode;
                    var td=tr.getElementsByTagName("td");
                    for(var i=0;i<td.length;i++){
                        for(var j=0;j<td[i].childNodes.length;j++){
                            if(td[i].childNodes[j].tagName=="INPUT") td[i].childNodes[j].checked=ifcheck
                        }              
                    }
                }
            </script>
        </head>    <body bgcolor="#ffffff">        <form  name="form1" action="" method="POST">
                <table style="TABLE-LAYOUT: fixed" cellspacing="0" cellpadding="0" border="1" width="100%" id="powertable" name="powertable" bordercolor="#BBB555">
                    <tr>
                        <td colspan="2"> <div align="center"> <strong>材料 </strong> </div> </td>
                        <td colspan="2"> <div align="center"> <strong>设备 </strong> </div> </td>
                    </tr>
                    <tr>
                        <td> <div align="center"> <strong>区域 </strong> </div> </td>
                        <td> <div align="center"> <strong>层 </strong> </div> </td>
                        <td> <div align="center"> <strong>区域 </strong> </div> </td>
                        <td> <div align="center"> <strong>层 </strong> </div> </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="C_QYMC"  value="监控中心" onClick="chkRow(event)">监控中心
                        </td>
                        <td>
                            <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层 <br>
                        </td>
                        <td>
                            <input type="checkbox" name="C_QYMC"  value="监控中心" >监控中心
                        </td>
                        <td>
                            <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层 <br>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="checkbox" name="C_QYMC"  value="楼内" onClick="chkRow(event)">楼内
                        </td>
                        <td>
                            <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层 <br>                        <input type="checkbox" name="C_SSCS"  value="地上2层">地上2层 <br>                        <input type="checkbox" name="C_SSCS"  value="地上3层">地上3层 <br>                    </td>
                        <td>
                            <input type="checkbox" name="C_QYMC"  value="楼内" onClick="chkRow(this)">楼内
                        </td>
                        <td>
                            <input type="checkbox" name="C_SSCS"  value="地上1层">地上1层 <br>                        <input type="checkbox" name="C_SSCS"  value="地上2层">地上2层 <br>                        <input type="checkbox" name="C_SSCS"  value="地上3层">地上3层 <br>
                        </td>
                    </tr>
                </table>
            </form>
        </body></html>
      

  2.   

    既然是在html中加的事件何必要用event对象来获取事件源呢？用this效率不是高点：
            <script>
    改为：onClick="chkRow(this)">
                function chkRow(obj){
                    var ifcheck=obj.checked;
                    var tr=obj.parentNode.parentNode;
                    var td=tr.getElementsByTagName("td");
                    for(var i=0;i<td.length;i++){
                        for(var j=0;j<td[i].childNodes.length;j++){
                            if(td[i].childNodes[j].tagName=="INPUT") td[i].childNodes[j].checked=ifcheck
                        }              
                    }
                }
            </script>