标签:
需求:点击父级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"); } });
这样就可以实现上述,如有其他更简单的方法,望告知;
--记录铭心!
标签:
原文地址:http://www.cnblogs.com/xinloverong/p/5167186.html