全选、取消、2级 checkbox的选中切换

时间:2023-03-09 20:22:33
全选、取消、2级 checkbox的选中切换

需求:点击父级checkbox的时候,子级出现全选或全取消;点击子级时,如:子级都是在未选中时,点击某一个子级,则父级选中;如:子级中只有一个选中状态(其他子级都是未选中),点击该子级,则父级也改为未选中状态;
HTML代码:

<dl class="set-list">
<dt>
<input type="checkbox" name="plateName" value="18" checked>
百事通</dt>
<dd>
<input type="checkbox" name="channelName18" value="22" checked>
找工作</dd>
<dd>
<input type="checkbox" name="channelName18" value="23" checked>
新楼盘</dd>
<dd>
<input type="checkbox" name="channelName18" value="26" checked>
找房子</dd>
<dd>
<input type="checkbox" name="channelName18" value="27" checked>
二手交易</dd>
<dd>
<input type="checkbox" name="channelName18" value="28" checked>
生活服务</dd>
<dd>
<input type="checkbox" name="channelName18" value="29" checked>
同城交友</dd>
<dd>
<input type="checkbox" name="channelName18" value="30" checked>
宠物服务</dd>
<dd>
<input type="checkbox" name="channelName18" value="31" checked>
车辆买卖</dd>
</dl>

  全选或取消:

$("dt input[name=plateName]").click(function () {
var c = $(this).attr("checked");
if ($(this).is(":checked")) {
$(this).parent().siblings("dd").find("input[type=checkbox]").attr("checked", "checked");
} else {
$(this).parent().siblings().find("input[type=checkbox]").removeAttr("checked");
}
});

  点击第一个或最后一个子级,改变父级checkbox的勾选状态:

$("dl.set-list dd").click(function () {
var t = 0;//为选中
if ($(this).children().is(":checked")) {
t = 1;
}
var n = 0;
var cond = $(this).parent().children("dd").find("input");
for (var i = 0; i < cond.length; i++) {
if (cond[i].checked == true)
n++;
}
if (n == 0 && t == 0) {
//将父级取消
$(this).siblings("dt").children().removeAttr("checked");
}
if (n == 1 && t == 1) {
//将父级勾选
$(this).siblings("dt").children().attr("checked", "checked");
}
});

  

 这样就可以实现上述,如有其他更简单的方法,望告知;

                --记录铭心!