Treeview与Checkboxes简单的html与Css

Question

我正在为我的ipfire备份系统寻找树视图格式。 用户需要选择要更新的文件夹。就像在图像中一样 - ＆gt;

为例

服务器脚本是CGI Perl，但我可以实现简单的HTML和CSS或非常简单的JS。 如果选中则需要父文件夹以自动检查内容

Answer 1

我不知道你的HTML，但它是否适合这个

<div class="tree">
  <input type="checkbox" /> 1.
  <div>
    <input type="checkbox" /> 1.1.
    <div>
      <input type="checkbox" /> 1.1.1.
    </div>
  </div>
</div>

如果你使用jQuery库，你可以这样做

$(document).ready(function() {
  $('.tree input[type="checkbox"]').on('change', function() {
    checkParent($(this));
  });

  function checkParent(element) {
    if (element.prop('checked')) {
      var parent = element.parent().parent().find('> input[type="checkbox"]');

      if (parent.length) {
        parent.prop('checked', true);
        checkParent(parent);
      }
    }
  }
});

＆＃13;

＆＃13;

$(document).ready(function() {
  $('.tree input[type="checkbox"]').on('change', function() {
    checkParent($(this));
  });

  function checkParent(element) {
    if (element.prop('checked')) {
      var parent = element.parent().parent().find('> input[type="checkbox"]');

      if (parent.length) {
        parent.prop('checked', true);
        checkParent(parent);
      }
    }
  }
});

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="tree">
  <input type="checkbox" /> 1.
  <div>
    <input type="checkbox" /> 1.1.
    <div>
      <input type="checkbox" /> 1.1.1.
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;