Rumah > Soal Jawab > teks badan
现在需要使用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'}
];
Nota: parentId dalam array b sepadan dengan id dalam array a
Sekarang bayangkan apabila anda mengklik item dalam senarai kotak semak A, senarai kotak semak B akan memaparkan rekod yang sepadan dengan parentId berdasarkan nilai id yang diperiksa dalam senarai kotak semak A, dan semua rekod akan disemak secara lalai.
Adakah terdapat kaedah yang bagus?
PHP中文网2017-06-26 10:52:20
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p id="p1">
<input type="checkbox" value="1"> A
<input type="checkbox" value="2"> B
<input type="checkbox" value="3"> C
</p>
<p id="p2">
<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
</p>
<script>
var checks1 = document.getElementById("p1").getElementsByTagName("input");
var checks2 = document.getElementById("p2").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>
某草草2017-06-26 10:52:20
Hanya sediakan idea
Dengar peristiwa perubahan A. Apabila A berubah, dapatkan nilainya dan kemudian paparkan B yang sepadan.
Secara lalai, semua elemen kotak pilihan B tidak dipaparkan, paparan:tiada dan atribut data diikat pada setiap kotak pilihan B untuk membezakan nilai A yang sepadan. Kemudian hanya tukar atribut paparan kotak semak yang sepadan dengan B apabila A berubah.
黄舟2017-06-26 10:52:20
Terima kasih atas jawapan anda, saya akan hantar kod untuk rujukan dan komunikasi jika perlu
<!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>