JavaScript implementiert die Eingabe in ein Mehrfachauswahlfeld

Question

Wenn ich auf „Auswählen“ klicke, erscheint ein Feld und wir können mehrere Optionen auswählen, einschließlich übergeordneter und untergeordneter Optionen. Bei Auswahl der Option wird die ID-Nummer sofort im Eingabefeld angezeigt. Wenn wir auf OK klicken, wird das Feld ausgeblendet. Ich möchte, dass jedes Feld einzeln innerhalb des Eingabefelds bearbeitet wird. Das ist mein HTML:

<p>Wenn ich auf „Auswählen“ klicke, erscheint ein Feld und wir können mehrere Optionen auswählen, einschließlich übergeordneter und untergeordneter Optionen. Bei Auswahl der Option wird die ID-Nummer sofort im Eingabefeld angezeigt. Wenn wir auf OK klicken, wird das Feld ausgeblendet. Ich möchte, dass jedes Feld einzeln innerhalb des Eingabefelds bearbeitet wird. Das ist mein HTML: </p>
<pre><code><button class="btn-select">Wählen Sie eins aus...</button>
<div class="box" style="display:none">
<input type="checkbox" class="checkbox" value="1">checkbox 1
<input type="checkbox" class="checkbox" value="2">Checkbox 2
<input type="text" class="input input-1"
<button class="btn-ok">OK</button>
</div>
<button class="btn-select">Wählen Sie zwei (übergeordnetes/untergeordnetes) aus...</button>
<div class="box" style="display:none">
<ul class="vater">
<li>
<input type="checkbox" class="checkbox" value="1">Teil 1
<ul class="children">
<li><input type="checkbox" class="checkbox" value="5">Checkbox 5</li>
</ul></li>
<li>
<input type="checkbox" class="checkbox" value="2">Teil 2
<ul class="children">
<li><input type="checkbox" class="checkbox" value="7">Checkbox 7</li>
<li><input type="checkbox" class="checkbox" value="8">Checkbox 8</li>
</ul></li></ul>
<input type="text" class="input input-2"
<button class="btn-ok">OK</button>
</div>
.
...选择三个...
..选择四个..
..
.

这是我的JS（子级和父级）：

handleChildren = function() {
    var $checkbox = $(this);
    var $checkboxChildren = $checkbox.parent();
    $checkboxChildren.each(function() {
      if ($checkbox.is(":checked")) {
        $(this).prop("checked", "checked");
      } anders {
        $(this).removeProp("geprüft");
      }
    });
};
handleParents = function(current) {
    var $parent = $(current).closest(".children").closest("li").find("> input[type=checkbox]");
    if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
      $parent.prop("checked", "checked");
    } anders {
      $parent.removeProp("markiert");
    }
    handleParents($parent);
}
$("ul.father").find("input[type=checkbox]").each(function() {
    $(input).on("click", handleChildren);
    $(input).on("click", function() {
        handleParents(this);
    });
});

这是我的JS:

$(document).on('click', '.btn-ok', function(){
    $('.box').hide()
});
$(document).on('click', '.btn-select', function(){
    $('.box').hide()
    $(this).next().show();
});
$(".checkbox").change(function() {
    var text = "";
    $(".checkbox:checked").each(function() {
        text += $(this).val() + ",";
    });
    text = text.substring(0, text.length - 1);
    $(this).next().val(text);
});

现在控制台显示了一个错误:

Uncaught InternalError: zu viel Rekursion
    nächste Datei:///var/www/html/jquey.js:1

Answer 1

您的handleParents无条件地调用自身。