Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Javascript - Dringend! Warten online! Problem mit der Verknüpfungsanzeige der Checkbox-Liste?
代言
代言 2017-06-26 10:50:20
0
3
886
现在需要使用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'}

];
Hinweis: Die parentId in Array b entspricht der ID in Array a

Stellen Sie sich nun vor, dass, wenn Sie auf ein Element in der Kontrollkästchenliste A klicken, in der Kontrollkästchenliste B der Datensatz angezeigt wird, der der parentId entspricht, basierend auf dem in der Kontrollkästchenliste A aktivierten ID-Wert, und alle Datensätze werden standardmäßig überprüft.

Gibt es eine gute Methode? Ich bin ein Neuling, also sollte ich besser einen Code als Referenz haben. Vielen Dank an alle!

代言
代言

Antworte allen(3)
洪涛
洪涛2017-06-26 10:52:20 3 Etage 

<!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>
Wie +0
Antwort hinzufügen
某草草
某草草2017-06-26 10:52:20 2 Etage

只提供思路

监听A的change事件，A改变时，获取其value，然后将相应的B显示出来。

可以默认B的所有checkbox元素不显示，display:none，在每个B的checkbox上绑一个data属性用来区分对应的A的value。那么只要在A改变的时候，相应改变B对应的checkbox的display属性即可。

Wie +0
Antwort hinzufügen
黄舟
黄舟2017-06-26 10:52:20 1 Etage

谢谢两位的回答，我把代码贴出来，供有需要的参考交流下

<!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>
Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage