現(xiàn)在需要使用checkbox進(jìn)行兩個(gè)復(fù)選框列表的聯(lián)動(dòng)顯示，假如有兩個(gè)復(fù)選框列表要顯示兩個(gè)結(jié)果集。
A復(fù)選框列表顯示數(shù)組a:[
{id:'1',name:'A'},
{id:'2',name:'B'},
{id:'3',name:'C'}];
B復(fù)選框列表顯示數(shù)組b:[
{parentId:'1',childName:'a'},
{parentId:'1',childName:'b'},
{parentId:'2',childName:'c'},
{parentId:'2',childName:'d'},
{parentId:'3',childName:'e'}];
注意：數(shù)組b中的parentId對(duì)應(yīng)數(shù)組a中的id
現(xiàn)在想當(dāng)點(diǎn)擊A複選框清單中的某一項(xiàng)時(shí)，B複選框清單會(huì)根據(jù)A複選框清單勾選的id值顯示出對(duì)應(yīng)parentId的記錄，並預(yù)設(shè)勾選所有的記錄。
有什麼好方法呢，本人菜鳥，最好有程式碼可以參考，謝謝大家！
3
0
0
只提供思路
監(jiān)聽A的change事件，A改變時(shí)，取得其value，然後將對(duì)應(yīng)的B顯示出來。
可以預(yù)設(shè)B的所有checkbox元素不顯示，display:none，在每個(gè)B的checkbox上綁一個(gè)data屬性用來區(qū)分對(duì)應(yīng)的A的value。那就只要在A改變的時(shí)候，就對(duì)應(yīng)到B對(duì)應(yīng)的checkbox的display屬性即可。
謝謝兩位的回答，我把程式碼貼出來，供有需要的參考交流下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="./jquery-3.1.1.min.js"></script>
<style type="text/css">
.show{
display: block;
}
.hidden{
display: none;
}
</style>
</head>
<body>
<p id="p1">
<input type="checkbox" value="1">A</input>
<input type="checkbox" value="2">B</input>
<input type="checkbox" value="3">C</input>
</p>
<p id="p2">
<p class='hidden'>
<input type="checkbox" value="1" data-parent-id="1" >a</input>
</p>
<p class='hidden'>
<input type="checkbox" value="2" data-parent-id="1" >b</input>
</p>
<p class='hidden'>
<input type="checkbox" value="3" data-parent-id="2" >c</input>
</p>
<p class='hidden'>
<input type="checkbox" value="4" data-parent-id="2" >d</input>
</p>
<p class='hidden'>
<input type="checkbox" value="5" data-parent-id="3" >e</input>
</p>
</p>
<script>
$("#p1").children('input').each(function(){
$(this).on('click',function(){
var cValue = $(this).val();
var isCheck = $(this).prop('checked');
$("#p2 input").each(function(){
if(cValue == $(this).data('parentId')){
$(this).attr('checked',isCheck);
if(isCheck){
$(this).parent().removeClass('hidden').addClass('show');
}
else{
$(this).parent().removeClass('show').addClass('hidden');
}
}
});
})
});
</script>
</body>
</html>
