当 我 单击 " 选择 " 时 ， 将 打开 一 个 框 ， 我们 可以 选择 许多 选项 ， 包括 父 项 和 子 项 。 当 选择 选项 时 ， 在 选择 后 ， 将 立即 在 输入 中 显示 ID 号 。 当 我们 单击 " 确定 " 时 ， 将 隐藏 该 框 。 我 希望 在 输入 中 分别 完成 每个 框 。 这 是 我 的 Html ：

<button class="btn-select">Select one ...</button>
<div class="box" style="display:none">
<input type="checkbox" class="checkbox" value="1">Check Box 1
<input type="checkbox" class="checkbox" value="2">Check Box 2
<input type="text" class="input input-1" value="">
<button class="btn-ok">Ok</button>
</div>
<button class="btn-select">Select Two (Father/Children) ...</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">Check Box 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">Check Box 7</li>
<li><input type="checkbox" class="checkbox" value="8">Check Box 8</li>                        
</ul></li></ul>
<input type="text" class="input input-2" value="">
<button class="btn-ok">Ok</button>
</div>
.
...Select Three...
..Select Four..
..
.

中 的 每 一 个
这 是 我 的 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

格式