Jquery代碼
$(function () {
$(":checkbox.parentfunc").click(function () {
//如何獲取被點擊的那個復選框
$(this).parent().parent().next().find(":checkbox").prop("checked", this.checked);
});
$(":checkbox:not(.parentfunc)").click(function () {
var td2 = $(this).parent().parent();
var count1 = td2.find(":checked").length; //當前選中的數量
var count2 = td2.find(":checkbox").length;//當前這個td里面有多少個復選框
if (count1 == count2) {
td2.prev().find(":checkbox").prop("checked", true);
}
else {
td2.prev().find(":checkbox").prop("checked", false);
}
})
})
html代碼
<body style="font-size: 12px;">
<div class="box">
請編寫javascript代碼，完成如下功能要求：<br />
1.選中第一列的功能大項后，自動選中該行第二列的所有功能小項。<br />
2.當第二列功能小項沒有全部選中時，該行第一列的復選款也要取消選中。<br />
<span>提示：需要使用到額外的兩個方法：parent()和find()。請查看幫助自學</span>
</div>
<div class="box">
<table id="table1" class="mytable">
<tr>
<td>
<span>
<input type="checkbox" id="chkPromote" class="parentfunc" />圖書管理
</span>
</td>
<td>
<span>
<input type="checkbox" id="Checkbox1" />新增圖書管理
</span><span>
<input type="checkbox" id="Checkbox2" />修改圖書管理
</span><span>
<input type="checkbox" id="Checkbox3" />刪除圖書管理
</span>
</td>
</tr>
<tr>
<td>
<span>
<input type="checkbox" id="Checkbox4" class="parentfunc" />會員管理
</span>
</td>
<td>
<span>
<input type="checkbox" id="Checkbox5" />新增會員管理
</span><span>
<input type="checkbox" id="Checkbox6" />修改會員管理
</span><span>
<input type="checkbox" id="Checkbox7" />刪除會員管理
</span>
</td>
</tr>
<tr>
<td>
<span>
<input type="checkbox" id="Checkbox8" class="parentfunc" />系統設置
</span>
</td>
<td>
<span>
<input type="checkbox" id="Checkbox9" />管理員設置
</span><span>
<input type="checkbox" id="Checkbox10" />角色管理
</span><span>
<input type="checkbox" id="Checkbox11" />權限管理
</span>
</td>
</tr>
</table>
</div>
</body>