cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Segera! Menunggu dalam talian! Masalah dengan paparan pautan senarai kotak pilihan?

现在需要使用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?

代言代言2709 hari yang lalu863

membalas semua(3)saya akan balas

  • PHP中文网

    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>

    balas
    0
  • 某草草

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

    balas
    0
  • 黄舟

    黄舟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>

    balas
    0
  • Batalbalas