關於Jquery 子節點與父節點的靈活運用

代碼如下：
HTML code:
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="3%" height="22px"></td>
<td width="30%">地區名稱</td>
<td width="8%">菜單等級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" height="20px">
<input type="checkbox" name="all" id="1" value="1" /></td>
<td align="left" style="padding-left:0px;">重慶市</td>
<td>父級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="1" value="31" /></td>
<td align="left" style="padding-left:30px;">江北區</td>
<td>二級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="1" value="32" /></td>
<td align="left" style="padding-left:30px;">沙坪壩區</td>
<td>二級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="1" value="33" /></td>
<td align="left" style="padding-left:30px;">大渡口區</td>
<td>二級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" height="20px">
<input type="checkbox" name="all" id="2" value="2" /></td>
<td align="left" style="padding-left:0px;">北京市</td>
<td>父級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="2" value="38" /></td>
<td align="left" style="padding-left:30px;">海淀區</td>
<td>二級</td>
</tr>
</table>

問題：如何用jquery實現以下目標：
一、點擊“重慶市”的複選框， 就會把“江北區”，“沙坪壩區”，“大渡口區”的複選框給選中， 選中之後 下面的“江北區”，“沙坪壩區” ，“大渡口區”的任意一個複選框是不能取消的， 只能通過點擊“重慶市”才能全部取消。
二、點擊“大渡口區”的複選框， “重慶市”的複選框是不會被選中的，只做出了點擊“重慶市” 把下面3個區給選中，而且還有BUG，怎樣來把這個功能給實現出來呢？？
準確的代碼如下：
<table width="100%" border="0" cellpadding="0" cellspacing="1">
<tr>
<td width="3%" height="22px"></td>
<td width="30%">地區名稱</td>
<td width="8%">菜單等級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" height="20px">
<input type="checkbox" name="all" id="" did="1" hash=0 value="1" /></td>
<td align="left" style="padding-left:0px;">重慶市</td>
<td>父級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="1" value="31" /></td>
<td align="left" style="padding-left:30px;">江北區</td>
<td>二級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="1" value="32" /></td>
<td align="left" style="padding-left:30px;">沙坪壩區</td>
<td>二級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="1" value="33" /></td>
<td align="left" style="padding-left:30px;">大渡口區</td>
<td>二級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" height="20px">
<input type="checkbox" name="all" id="" did="2" hash=0 value="2" /></td>
<td align="left" style="padding-left:0px;">北京市</td>
<td>父級</td>
</tr>
<tr bgcolor="#FFFFFF">
<td align="left" style="padding-left:20px;">
<input type="checkbox" name="all" id="2" value="38" /></td>
<td align="left" style="padding-left:30px;">海淀區</td>
<td>二級</td>
</tr>
</table>
$(":checkbox").click(function(){
if($(this).attr("hash")==0){
if($(this).attr("checked")){
$("input[id="+$(this).attr("did")+"]").each(function(){
$(this).attr({checked:true,disabled:true});
});
}else{
$("input[id="+$(this).attr("did")+"]").each(function(){
$(this).attr({checked:false,disabled:false});
});
}
}

});

此文轉載自Web開發之答疑解惑源www.znjcx.com，如需轉載，請註明原文出處：http://www.znjcx.com/html/y2012/927_on-the-flexible-application-of-the-child-node-from-the-parent-node-jquery.html，謝謝！

更多web開發相關文章也請參訪：Web開發之答疑解惑源（www.znjcx.com）.