zoukankan      html  css  js  c++  java

  • js用于树型结构级联选择 支持三态级联选择

    <html>

    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>及联选择-用于权限选择比较合适</title>
    </head>

    <body>
    <ul id="tree">
            <li><input type=checkbox>
                <ul>
                    <li><input type=checkbox>
                        <ul>
                            <li><input type=checkbox></li>
                            <li><input type=checkbox></li>
                        </ul>
                    </li>
                </ul>
            </li>
    </ul>
    </body>
    <script language="javascript">

    var arr = tree.getElementsByTagName('input')
    for(var i=0; i<arr.length; i++){
            var input = arr[i]
            if(input.type == 'checkbox'){
            input.onclick     = ClickInput
        }
    }

    function ClickInput(){
            var li = this.parentElement;
            var arr = li.getElementsByTagName('input')
            for(var i=0; i<arr.length; i++){
                var input = arr[i]
                if(input.type == 'checkbox'){
                input.checked     = this.checked
            }
        }
            var li = li.parentElement.parentElement
        
            while(li.tagName.toLowerCase() == 'li'){
                var input = li.childNodes[0]
                if(input.tagName.toLowerCase() == 'input'){
                input.checked     = this.checked
            }
            li     = li.parentElement.parentElement
        }
    }

    </script>
    </html>


    更新：支持三态级联选择
    下载：/Files/boolean/checkbox3StatucCascadeSelectTree.zip
    在线演示：/Files/boolean/cascadeTree.htm
  • 相关阅读:
    SpringBoot入门
    VUE 监听局部滚动 设置ICON的位置跟随
    手机端页面调试工具-vconsole使用
    js获取字符串字节的位数
    判断数据为[] {} /空数组或空对象
    Vue axios 上传图片
    Vue触发input选取文件点击事件
    腾讯地图添加多个Marker
    VUE-CLI 设置页面title
    小程序wxml文件引用方式
  • 原文地址：https://www.cnblogs.com/boolean/p/616611.html
Copyright © 2011-2022 走看看