JavaScript实现多选框输入

Question

<p>当我点击选择时，会弹出一个框，我们可以选择多个选项，包括父级和子级。当选项被选中后，立即在输入框中显示ID号码。当我们点击确定时，框将被隐藏。我希望每个框都在输入框中单独完成。这是我的HTML：</p> <pre class="brush:php;toolbar:false;"><p>当我点击选择时，会弹出一个框，我们可以选择多个选项，包括父级和子级。当选项被选中后，立即在输入框中显示ID号码。当我们点击确定时，框将被隐藏。我希望每个框都在输入框中单独完成。这是我的HTML：</p> <pre><code><button class="btn-select">选择一个...</button> <div class="box" style="display:none"> <input type="checkbox" class="checkbox" value="1">复选框1 <input type="checkbox" class="checkbox" value="2">复选框2 <input type="text" class="input input-1" value=""> <button class="btn-ok">确定</button> </div> <button class="btn-select">选择两个（父级/子级）...</button> <div class="box" style="display:none"> <ul class="father"> <li> <input type="checkbox" class="checkbox" value="1">部分1 <ul class="children"> <li><input type="checkbox" class="checkbox" value="5">复选框5</li> </ul></li> <li> <input type="checkbox" class="checkbox" value="2">部分2 <ul class="children"> <li><input type="checkbox" class="checkbox" value="7">复选框7</li> <li><input type="checkbox" class="checkbox" value="8">复选框8</li> </ul></li></ul> <input type="text" class="input input-2" value=""> <button class="btn-ok">确定</button> </div> 。 ...选择三个... ..选择四个.. .. .</pre> <p>这是我的JS（子级和父级）：</p>

handleChildren = function() {
    var $checkbox = $(this);
    var $checkboxChildren = $checkbox.parent();
    $checkboxChildren.each(函数() {
      if ($checkbox.is(":checked")) {
        $(this).prop(“已检查”, “已检查”);
      } 别的 {
        $(this).removeProp(“选中”);
      }
    });
};
句柄父母 = 函数（当前）{
    var $parent = $(current).closest(".children").closest("li").find(>> input[type=checkbox]");
    if ($parent.parent().find(".children input[type=checkbox]:checked").length > 0) {
      $parent.prop(“已检查”, “已检查”);
    } 别的 {
      $parent.removeProp(“选中”);
    }
    处理父母（$父母）；
}
$(“ul.father”).find(“input[type=checkbox]”).each(function() {
    $(input).on(“点击”,handleChildren);
    $(input).on(“点击”, function() {
        处理父母（这个）；
    });
});</pre>
<p>这是我的JS：</p>
$(document).on('click', '.btn-ok', function(){
    $('.box').hide()
});
$(document).on('点击', '.btn-select', function(){
    $('.box').hide()
    $(this).next().show();
});
$(“.checkbox”).change(function() {
    var 文本 = "";
    $(".checkbox:checked").each(function() {
        文本 += $(this).val() + ",";
    });
    文本 = text.substring(0, text.length - 1);
    $(this).next().val(文本);
});</pre>
<p>现在控制台显示了一个错误：</p>
<pre class="brush:php;toolbar:false;">未捕获的内部错误：递归过多
    最接近的文件:///var/www/html/jquey.js:1</pre></p>

Answer 1

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