multi checkbox on input javascript-CodePudding

When I click on Select, a box opens and we select many options, including father and child.When options are selected After selection, immediately display the ID numbers on the input. When we click OK, the box will be hidden. I want each of the boxes to be done separately in the input .This is My Html:

<button >Select one ...</button>
<div  style="display:none">
<input type="checkbox"  value="1">Check Box 1
<input type="checkbox"  value="2">Check Box 2
<input type="text"  value="">
<button >Ok</button>
</div>
<button >Select Two (Father/Children) ...</button>
<div  style="display:none">
<ul >
<li>
<input type="checkbox"  value="1">Part 1
<ul >
<li><input type="checkbox"  value="5">Check Box 5</li>
</ul></li>
<li>
<input type="checkbox"  value="2">Part 2
<ul >
<li><input type="checkbox"  value="7">Check Box 7</li>
<li><input type="checkbox"  value="8">Check Box 8</li>                        
</ul></li></ul>
<input type="text"  value="">
<button >Ok</button>
</div>
.
...Select Three...
..Select Four..
..
.

This is My JS (Children and Father):

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);
    });
});

This is My 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);
});

Now an error is shown by the console that says:

    Uncaught InternalError: too much recursion
    closest file:///var/www/html/jquey.js:1

CodePudding user response：

Your handleParents calls itself unconditionally.