多選分級下拉

Question

我有以下要求：

1. 顯示向下基於層次（父子關係）的下降。

2. 的每個節點都應該籤能（A複選框中的每一個選項）

3. 如果我們選擇所有子節點，那麼家長應該自動檢查 或副反之亦然一個。

例如： 內部下拉我想是這樣的：

[Checkbox]Element 1 
     [Checkbox]Element 1.1 
     [Checkbox]Element 1.2 
      [Checkbox]Element 1.2.1 
      [Checkbox]Element 1.2.2 
[Checkbox]Element 2 
     [Checkbox]Element 2.1 
     [Checkbox]Element 2.2 
      [Checkbox]Element 2.2.1 
      [Checkbox]Element 2.2.2 

請提出任何解決方案或是否有任何可用的插件。未來的等級可能會超過4-5級。

在此先感謝。

Answer 1

我製作了虛擬代碼。希望它能幫助你。

的Html -

<div class="parent"> 
    <input type="checkbox">1 
    <div> 
    <input type="checkbox">1.1 
    <input type="checkbox">1.2 
    <div> 
     <input type="checkbox">1.2.1 
     <div> 
     <input type="checkbox">1.2.1.1 
     <input type="checkbox">1.2.1.2 
     <input type="checkbox">1.2.1.3 
     </div> 
     <input type="checkbox">1.2.2 
    </div> 
    </div> 
    <input type="checkbox">2 
    <div> 
    <input type="checkbox">2.1 
    <input type="checkbox">2.2 
    </div> 
</div> 

jQuery的 -

$('input').change(function(){ 
    var status = false; 
    $(this).next().find('input').prop('checked', this.checked); 
    status = ($(this).parent().find('> input').not(':checked').length === 0); 
    $(this).parent().prev().prop('checked', status); 
    if(status){ 
     $(this).parent().prev().trigger("change"); 
    } 
    else{ 
    $(this).parents().prev().prop('checked', false); 
    } 
}); 

您可以參考演示 - https://jsfiddle.net/dhananjaymane11/w0trj615/1/

Answer 2

你可以試試這個插件 Bootstrap Treeview

我用它類似的情況像你這樣的。