• 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

  • 相关阅读:
    SE Springer小组《Spring音乐播放器》软件需求说明3
    SE Springer小组之《Spring音乐播放器》可行性研究报告三、四
    软件工程学习笔记一:单元测试
    关于软件工程
    离散数学中的命题表达式计算并生成真值表
    “A + B”竟然还能这样做?
    测试程序运行时间的方法——clock()
    排序(1)———选择排序及其优化
    临时存几张图
    伊利亚特
  • 原文地址:https://www.cnblogs.com/cabbage/p/2290457.html
Copyright © 2020-2023  润新知