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無條件地呼叫自身。