<table cellSpacing="1" cellPadding="1" width="90%" align="center" border="0" id="dataPopedom">
<tr>
<td class="ta_01" colspan=2 align="left" width="100%">
全选/全不选
<input type="checkbox" name="selectOperAll" onclick="checkAllOper(this)">
</td>
</tr>
<tr>
<td class="ta_01" align="left" width="18%" height="22">
<input type="checkbox" name="selectoper" id="aa_aa" value="数据字典" onClick='goSelect(this.id)'>数据字典</input>
<!--mid_mid-->
</td>
<td>
<div>
<input type="checkbox" name="selectoper" id="aa_ab" value="编辑" onClick='goSelect(this.id)'>编辑</input>
<input type="checkbox" name="selectoper" id="aa_ac" value="保存" onClick='goSelect(this.id)'>保存</input>
<!--pid_mid-->
</div>
</td>
</tr>
</td>
</tr>
<tr>
<td class="ta_01" align="left" width="18%" height="22">
<input type="checkbox" name="selectoper" id="bb_bb" value="数据字典" onClick='goSelect(this.id)'>数据字典1</input>
<!--mid_mid-->
</td>
<td>
<div>
<input type="checkbox" name="selectoper" id="bb_ba" value="编辑" onClick='goSelect(this.id)'>编辑1</input>
<input type="checkbox" name="selectoper" id="bb_bc" value="保存" onClick='goSelect(this.id)'>保存1</input>
<!--pid_mid-->
</div>
</td>
</tr>
</td>
</tr>
</table>
</body>
<script type="text/javascript" src="jquery-1.11.3.js"></script>
<script type="text/javascript">
function checkAllOper(oper) {
$("input[type='checkbox'][name='selectoper']").prop("checked", oper.checked);
}
//选中复选框,触发事件
function goSelect(id) {
//按照_符号分隔
console.log(id);
var array = id.split("_");
console.log(array);
if (array[0] == array[1]) { //此时说明操作的(父)节点
//选中父
if ($("#" + id)[0].checked) {
//子都选中
$("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "']").prop("checked", true);
}
//取消父
else {
//子都取消
$("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "']").prop("checked", false);
}
} else { //说明此时操作的子设置中的一个(子)
//当选中子设置中的一个,则父一定被选中
if ($("#" + id)[0].checked) {
$("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "'][id$='" + array[0] + "']").prop("checked", true);
}
//当取消子设置中的一个
else {
//先查找子设置的对象
var $check = $("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "']:not([id$='" + array[0] + "'])");
//遍历子设置的对象
/**
* flag:用于判断当前子设置的对象是否有被选中
* * flag=false,子对象都没有被选中,此时父要被取消
* * flag=true,子对象中至少有一个被选中,此时不做任何操作
*/
var flag = false;
$check.each(function(index, domEle) {
if (domEle.checked) {
flag = true;
return false;
}
})
if (!flag) {
$("input[type='checkbox'][name='selectoper'][id^='" + array[0] + "'][id$='" + array[0] + "']").prop("checked", false);
}
}
}
}
</script>
CheckBoxDemo
最新推荐文章于 2024-05-21 17:35:54 发布