zoukankan      html  css  js  c++  java
  • 复选框的子级和父级间的逻辑

    a.父级选中 子级都选中

    b.子级一个选中 父级就选中

    c.全选或者全部选中

    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script> 

    <script type="text/javascript">
    $(function(){
    $("#checkedAll").click(function(){
    var flag = this.checked;
    $(":checkbox[name='items']").attr("checked", flag);
    });

    $(":checkbox[name='items']").click(function(){
    var _cbClass = $(this).attr('class'); //获取父级的class元素
    if(_cbClass){//判断是否有元素,有的话则是父级复选框
    var _isChecked = $(this).is(":checked"); //获取是否选中
    $(":checkbox[pid='"+_cbClass+"']").attr("checked",_isChecked);//根据父级是否选中的状态设置子级的状态
    }else{//操作子级复选框
    var _pid = $(this).attr('pid');//获取pid的值
    if($("input[pid="+_pid+"]").is(":checked")==true){
    $(":checkbox[class='"+_pid+"']").attr("checked",true);//判断子级是否有选中,有的话父级选中
    }else{
    $(":checkbox[class='"+_pid+"']").attr("checked",false);
    }
    }

    });


    });

    </script>

    html部分:

    <body>

    <form method="post" action="">
    <div style="margin-left:30px;">权限设置
    <input type="checkbox" id="checkedAll" />全选/全不选
    <div style="border:solid 1px #ebebeb; padding-left:70px; padding-top:20px; margin-top:15px;">

    <input type="checkbox" name="items" class="id_1"/><span style="font-size:18px; color:#36F;">广州</span>
    <ul>
    <li><input type="checkbox" name="items" pid="id_1"/>白云区</li>
    <li><input type="checkbox" name="items" pid="id_1"/>越秀区</li>

    </ul>


    <input type="checkbox"name="items" class="id_2" /><span style="font-size:18px; color:#36F;">北京</span>
    <ul>
    <li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
    <li><input type="checkbox" name="items" pid="id_2"/>白云区</li>
    </ul>
    </div>
    </div>
    </form>

    </body>

  • 相关阅读:
    深度学习实战 Tricks
    Latex 琐碎
    Latex 琐碎
    数据网站(数据集的获取)、打分网站
    数据网站(数据集的获取)、打分网站
    matplotlib —— 添加文本信息(text)
    hdu 1506 Largest Rectangle in a Histogram
    poj2007
    OpenRisc-43-or1200的IF模块分析
    RHEL 6.4 安装svn和apache
  • 原文地址:https://www.cnblogs.com/hFannie/p/4565532.html
Copyright © 2011-2022 走看看