javascript - Segera! Menunggu dalam talian! Masalah dengan paparan pautan senarai kotak pilihan?
代言
代言 2017-06-26 10:50:20
0
3
861
现在需要使用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?

代言
代言

membalas semua(3)
洪涛

<!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>
某草草

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.

黄舟

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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan