关于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）.