全选、取消、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");
        }
    });

  

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

                --记录铭心!

原文地址:https://www.cnblogs.com/xinloverong/p/5168072.html