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
  • 相关阅读:
    精妙SQL语句介绍
    ASP判断文件地址是否有效
    将源代码清空,这样别人就看不到源码了
    部署
    sublime
    vscode
    android node
    mac开启热点
    微信
    常见问题
  • 原文地址：https://www.cnblogs.com/boolean/p/616611.html
Copyright © 2011-2022 走看看