masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
javascript - Segera! Menunggu dalam talian! Masalah dengan paparan pautan senarai kotak pilihan?
代言
代言 2017-06-26 10:50:20
0
3
885
现在需要使用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)
洪涛
洪涛2017-06-26 10:52:20 Tingkat 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>
Suka +0
Tambah Balasan
某草草
某草草2017-06-26 10:52:20 Tingkat 2

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.

Suka +0
Tambah Balasan
黄舟
黄舟2017-06-26 10:52:20 Tingkat 1

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>
Suka +0
Tambah Balasan
Topik popular
Lagi>
Artikel popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan