JavaScript implements multi-select box input

Question

When I click select, a box pops up and we can select multiple options, including parent and child. When the option is selected, the ID number is immediately displayed in the input box. When we click OK, the box will be hidden. I want each box to be done individually within the input box. This is my HTML:

<p>When I click select, a box pops up and we can select multiple options, including parent and child. When the option is selected, the ID number is immediately displayed in the input box. When we click OK, the box will be hidden. I want each box to be done individually within the input box. This is my HTML: </p>
<pre><code><button class="btn-select">Select one...</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" value="">
<button class="btn-ok">OK</button>
</div>
<button class="btn-select">Select two (parent/child)...</button>
<div class="box" style="display:none">
<ul class="father">
<li>
<input type="checkbox" class="checkbox" value="1">Part 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">Part 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" value="">
<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");
      } else {
        $(this).removeProp("checked");
      }
    });
};
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");
    } else {
      $parent.removeProp("checked");
    }
    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: too much recursion
    closest file:///var/www/html/jquey.js:1

Answer 1

Your handleParents Calls itself unconditionally.