zoukankan      html  css  js  c++  java
  • js N级菜单 选择/取消 自动刷父级子级状态算法

    <div id="power_tree">
    <ul>
    <li>
    <input type="checkbox"><label>一级</label>
    <ul>
    <li>
    <input type="checkbox"><label>二级1</label>
    <ul>
    <li>
    <input type="checkbox"><label>三级1</label></li>
    <li>
    <input type="checkbox"><label>三级2</label></li>
    <li>
    <input type="checkbox"><label>三级3</label></li></ul>
    </li>
    <li>
    <input type="checkbox"><label>二级2</label>
    <ul>
    <li>
    <input type="checkbox"><label>三级1</label></li></ul>
    </li>
    <li>
    <input type="checkbox"><label>二级3</label></li>
    <li>
    <input type="checkbox"><label>二级4</label>
    <ul>
    <li>
    <input type="checkbox"><label>三级1</label>
    <ul>
    <li>
    <input type="checkbox"><label>四级1</label></li></ul>
    </li>
    </ul>
    </li>
    </div>
    <script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
    function Test(obj) {
    var $this = $(obj);
    var checked = obj.checked;
    var parentUl = $this.parent().parent('ul');
    var parentLevel = parentUl.prev().prev('input:checkbox');
    var nextLevel = $this.next().next('ul').find("input:checkbox");
    //无论如何子级状态总量随着父级状态变化
    nextLevel.attr("checked", checked);
    if (checked) {
    if (parentLevel.size() > 0) {
    //只要选上父级就选上
    parentLevel.attr("checked", true);
    Test(parentLevel);//递归
    }
    } else {
    //子取消默认设置父级取消
    var flag = false;
    //但是需要看其它兄弟是否有选上的
    parentUl.children('li').each(function () {
    var _$this = $(this);
    var _checked = _$this.children(':first').attr("checked");
    //直到碰到选上的兄弟为止跳出循环
    return !(flag = _checked != undefined);
    });
    if (parentLevel.size() > 0) {
    parentLevel.attr("checked", flag);
    Test(parentLevel);
    }
    }
    }
    $('#power_tree :checkbox').change(function () {
    Test(this);
    });
    });
    </script>
     

    请点击上面的运行代码,然后刷新页面(CDN加载Jquery)

    子选父必选    父选子全选      所有子取消父即取消 

    这里面附上 demo

  • 相关阅读:
    数据库连接池实现
    Linux array_vpnc
    MVC小结
    Linux和Windows下 classpath 的差异
    无法删除DLL文件解决方法(转)
    电信工程管理方法
    常用设计思想
    MAX262使用说明
    基于FPGA的FIR滤波器(草稿)
    数字存储示波器(草稿)
  • 原文地址:https://www.cnblogs.com/cabbage/p/2290457.html
Copyright © 2011-2022 走看看