js实现checkbox级联选择

最新推荐文章于 2024-07-22 17:44:20 发布

caiyl1314

最新推荐文章于 2024-07-22 17:44:20 发布

阅读量4.7k

点赞数

分类专栏： jquery 文章标签： javascript checkbox js 级联选择

本文链接：https://blog.csdn.net/cai7095576/article/details/21483757

版权

jquery 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

js实现checkbox级联选择：

html代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<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>
</html>

js代码：

<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>

显示效果如图：