suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Javascript - Dringend! Warten online! Problem mit der Verknüpfungsanzeige der Checkbox-Liste?

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

代言代言2697 Tage vor856

Antworte allen(3)Ich werde antworten

  • 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>

    Antwort
    0
  • 某草草

    某草草2017-06-26 10:52:20

    只提供思路

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

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

    Antwort
    0
  • 黄舟

    黄舟2017-06-26 10:52:20

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

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

    Antwort
    0
  • StornierenAntwort