zoukankan      html  css  js  c++  java
  • 全选、取消、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");
            }
        });
    

      

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

                    --记录铭心!

  • 相关阅读:
    学习JavaDay07
    学习JavaDay05
    学习JavaDay0402
    学习JavaDay04
    学习JavaDay03
    学习JavaDay02
    学习JavaDay01
    数据库的增删改查
    关于Spring
    关于多线程Thread的简单应用
  • 原文地址:https://www.cnblogs.com/xinloverong/p/5168072.html
Copyright © 2011-2022 走看看