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
原文地址:https://www.cnblogs.com/boolean/p/616611.html