JavaScript implémente la saisie par boîte à sélection multiple

Question

Lorsque je clique sur Sélectionner, une boîte apparaît et nous pouvons sélectionner plusieurs options, y compris le parent et l'enfant. Lorsque l'option est sélectionnée, le numéro d'identification est immédiatement affiché dans la zone de saisie. Lorsque nous cliquons sur OK, la boîte sera masquée. Je veux que chaque case soit créée individuellement dans la zone de saisie. Voici mon code HTML :

<p>Lorsque je clique sur Sélectionner, une boîte apparaît et nous pouvons sélectionner plusieurs options, y compris le parent et l'enfant. Lorsque l'option est sélectionnée, le numéro d'identification est immédiatement affiché dans la zone de saisie. Lorsque nous cliquons sur OK, la boîte sera masquée. Je veux que chaque case soit créée individuellement dans la zone de saisie. Voici mon code HTML : </p>
<pre><code><button class="btn-select">Sélectionnez-en un...</button>
<div class="box" style="display:none">
<type d'entrée="case à cocher" classe="case à cocher" valeur="1">case à cocher 1
<type d'entrée="case à cocher" class="case à cocher" valeur="2">case à cocher 2
<type d'entrée="texte" classe="entrée entrée-1" valeur="">
<classe de bouton="btn-ok">OK</bouton>
</div>
<button class="btn-select">Sélectionnez deux (parent/enfant)...</button>
<div class="box" style="display:none">
<ul class="père">
<li>
<type d'entrée="case à cocher" class="case à cocher" valeur="1">Partie 1
<ul class="enfants">
<li><type d'entrée="case à cocher" classe="case à cocher" valeur="5">case à cocher 5</li>
</ul></li>
<li>
<type d'entrée="case à cocher" class="case à cocher" valeur="2">Partie 2
<ul class="enfants">
<li><type d'entrée="case à cocher" classe="case à cocher" valeur="7">case à cocher 7</li>
<li><type d'entrée="case à cocher" classe="case à cocher" valeur="8">case à cocher 8</li>
</ul></li></ul>
<type d'entrée="texte" classe="entrée entrée-2" valeur="">
<classe de bouton="btn-ok">OK</bouton>
</div>
.
... 选择三个...
..选择四个..
..
.≪/pré>
<p>这是我的JS（子级和父级）：</p>
<pre class="brush:php;toolbar:false;">handleChildren = function() {
    var $checkbox = $(this);
    var $checkboxChildren = $checkbox.parent();
    $checkboxEnfants.each(function() {
      if ($checkbox.is(":checked")) {
        $(this).prop("vérifié", "vérifié");
      } autre {
        $(this).removeProp("checked");
      }
    });
} ;
handleParents = fonction (actuel) {
    var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
    if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
      $parent.prop("vérifié", "vérifié");
    } autre {
      $parent.removeProp("vérifié");
    }
    handleParents($parent);
}
$("ul.father").find("input[type=checkbox]").each(function() {
    $(input).on("cliquez", handleChildren);
    $(input).on("clic", function() {
        handleParents(ce);
    });
});</pré>
<p>这是我的JS：</p>
<pre class="brush:php;toolbar:false;">$(document).on('click', '.btn-ok', function(){
    $('.box').hide()
});
$(document).on('clic', '.btn-select', function(){
    $('.box').hide()
    $(this).next().show();
});
$(".checkbox").change(function() {
    var texte = "";
    $(".checkbox:checked").each(function() {
        texte += $(this).val() + ",";
    });
    texte = texte.substring(0, texte.longueur - 1);
    $(this).next().val(texte);
});</pré>
<p>现在控制台显示了一个错误：</p>
<pre class="brush:php;toolbar:false;">Uncaught InternalError : trop de récursivité
    fichier le plus proche:///var/www/html/jquey.js:1

Answer 1

Votre handleParents s'appelle inconditionnellement.