communauté Apprendre Bibliothèque d'outils Loisirs
recherche
Français
javascript - Urgent ! En attente en ligne ! Problème avec l'affichage des liens de la liste des cases à cocher ?
代言
代言 2017-06-26 10:50:20
0
3
862
现在需要使用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'}

];
Remarque : Le parentId dans le tableau b correspond à l'identifiant dans le tableau a

Imaginez maintenant que lorsque vous cliquez sur un élément dans la liste des cases à cocher A, la liste des cases à cocher B affichera l'enregistrement correspondant au parentId en fonction de la valeur id cochée dans la liste des cases à cocher A, et tous les enregistrements seront cochés par défaut.

Existe-t-il une bonne méthode ? Je suis un débutant, donc je ferais mieux d'avoir du code pour référence. Merci à tous !

代言
代言

répondre à tous(3)
洪涛
洪涛2017-06-26 10:52:20 3 plancher 

<!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>
Comme +0
Ajouter une réponse
某草草
某草草2017-06-26 10:52:20 2 plancher

Fournissez uniquement des idées

Écoutez l'événement de changement de A. Lorsque A change, obtenez sa valeur puis affichez le B correspondant.

Par défaut, tous les éléments de case à cocher de B ne sont pas affichés, display : aucun, et un attribut de données est lié à chaque case à cocher de B pour distinguer la valeur correspondante de A. Il suffit ensuite de modifier l'attribut d'affichage de la case à cocher correspondant à B lorsque A change.

Comme +0
Ajouter une réponse
黄舟
黄舟2017-06-26 10:52:20 1 plancher

Merci à tous les deux pour vos réponses, je publierai le code pour référence et communication si nécessaire

<!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>
Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal