javascript - 多选分层下拉

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

请提出任何解决方案或是否有可用的插件。 future 可能会超过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/