javascript - 急！在线等！checkbox列表联动显示的问题？
本文介绍了javascript - 急！在线等！checkbox列表联动显示的问题？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
现在需要使用checkbox进行两个复选框列表的联动显示，假如有两个复选框列表要显示两个结果集。
A复选框列表显示数组a:[
{id:'1',name:'A'},
{id:'2',name:'B'},
{id:'3',name:'C'}];
B复选框列表显示数组b:[
{parentId:'1',childName:'a'},
{parentId:'1',childName:'b'},
{parentId:'2',childName:'c'},
{parentId:'2',childName:'d'},
{parentId:'3',childName:'e'}];
注意：数组b中的parentId对应数组a中的id
现在想当点击A复选框列表中的某一项时，B复选框列表会根据A复选框列表勾选的id值显示出对应parentId的记录，并默认勾选所有的记录。
有什么好方法呢，本人菜鸟，最好有代码可以参考，谢谢大家！
解决方案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="div1">
<input type="checkbox" value="1"> A
<input type="checkbox" value="2"> B
<input type="checkbox" value="3"> C
</div>
<div id="div2">
<input type="checkbox" value="a" data-parent="1"> a
<input type="checkbox" value="b" data-parent="1"> b
<input type="checkbox" value="c" data-parent="2"> c
<input type="checkbox" value="d" data-parent="2"> d
<input type="checkbox" value="e" data-parent="3"> e
</div>
<script>
var checks1 = document.getElementById("div1").getElementsByTagName("input");
var checks2 = document.getElementById("div2").getElementsByTagName("input");
for (var i=0;i<checks1.length;i++){
checks1[i].onclick = function () {
var cValue = this.value;
var isCheck = this.checked;
for (var j=0;j<checks2.length;j++){
if (checks2[j].dataset.parent==cValue){
checks2[j].checked =isCheck;
}
}
}
}
</script>
</body>
</html>这篇关于javascript - 急！在线等！checkbox列表联动显示的问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
