<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 class="brush:php;toolbar:false;"><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> . ...选择三个... ..选择四个.. .. .</pre> <p>这是我的JS（子级和父级）：</p> <pre class="brush:php;toolbar:false;">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); }); });</pre> <p>这是我的JS：</p> <pre class="brush:php;toolbar:false;">$(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); });</pre> <p>现在控制台显示了一个错误：</p> <pre class="brush:php;toolbar:false;">Uncaught InternalError: too much recursion closest file:///var/www/html/jquey.js:1</pre></p>