猿问

急！在线等！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的记录，并默认勾选所有的记录。

有什么好方法呢，本人菜鸟，最好有代码可以参考，谢谢大家！


倚天杖
浏览 546回答 1
1回答

HUWWW

<!DOCTYPE html><html><head>&nbsp; &nbsp; <meta charset="UTF-8">&nbsp; &nbsp; <title>Title</title></head><body><div id="div1">&nbsp; &nbsp; <input type="checkbox" value="1"> A&nbsp; &nbsp; <input type="checkbox" value="2"> B&nbsp; &nbsp; <input type="checkbox" value="3"> C</div><div id="div2">&nbsp; &nbsp; <input type="checkbox" value="a" data-parent="1"> a&nbsp; &nbsp; <input type="checkbox" value="b" data-parent="1"> b&nbsp; &nbsp; <input type="checkbox" value="c" data-parent="2"> c&nbsp; &nbsp; <input type="checkbox" value="d" data-parent="2"> d&nbsp; &nbsp; <input type="checkbox" value="e" data-parent="3"> e</div><script>&nbsp; &nbsp; var checks1 = document.getElementById("div1").getElementsByTagName("input");&nbsp; &nbsp; var checks2 = document.getElementById("div2").getElementsByTagName("input");&nbsp; &nbsp; for (var i=0;i<checks1.length;i++){&nbsp; &nbsp; &nbsp; &nbsp; checks1[i].onclick = function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var cValue = this.value;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var isCheck = this.checked;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var j=0;j<checks2.length;j++){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (checks2[j].dataset.parent==cValue){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; checks2[j].checked =isCheck;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }</script></body></html>
0
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答