多选择分层下拉

Question

我有以下要求：

1. 显示基于层次结构(父、子关系)的下拉列表。
2. 每个节点都应该是可选中的(每个选项中的复选框)
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

您可以试试这个插件引导树视图。

我用它来处理类似你的案子。