JavaScript實作多選框輸入
P粉502608799
P粉502608799 2023-09-06 09:26:47
0
1
510
<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>            
P粉502608799
P粉502608799

全部回覆(1)
P粉141035089

您的handleParents無條件地呼叫自身。

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板