scinote-web/app/views/reports/new/modal/_project_contents.html.erb

<%= bootstrap_form_tag remote: true, url: project_contents_project_reports_path(project, format: :json), method: :post, html: { id: "add-contents-form" } do |f| %>
  <%= hidden_field_tag :id, project.id %>
  <div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li role="presentation" class="active">
        <a href="#tasks-tab" aria-controls="tasks-tab" role="tab" data-toggle="tab">
          <span class="glyphicon glyphicon-credit-card visible-xs"></span>
          <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></span>
        </a>
      </li>
      <% if project.project_my_modules.is_archived(false).count > 0 %>
      <li role="presentation">
        <a href="#content-tab" aria-controls="content-tab" role="tab" data-toggle="tab">
          <span class="glyphicon glyphicon-link visible-xs"></span>
          <span class="hidden-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></span>
        </a>
      </li>
      <% end %>
    </ul>

    <!-- Tab panes -->
    <div class="tab-content">
      <div role="tabpanel" class="tab-pane active" id="tasks-tab">
        <h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.tasks_tab") %></h5>
        <%= render partial: "reports/new/modal/project_contents_inner.html.erb", locals: { form: f, project: project } %>
      </div>
      <% if project.project_my_modules.is_archived(false).count > 0 %>
        <div role="tabpanel" class="tab-pane" id="content-tab">
          <h5 class="visible-xs"><%= t("projects.reports.elements.modals.project_contents.content_tab") %></h5>
          <%= render partial: "reports/new/modal/module_contents_inner.html.erb", locals: { form: f } %>
          <hr>
          <%= render partial: "reports/new/modal/step_contents_inner.html.erb", locals: { form: f } %>
          <hr>
          <%= render partial: "reports/new/modal/result_contents_inner.html.erb", locals: { form: f } %>
        </div>
      <% end %>
    </div>
  </div>
<% end %>

<script type="javascript">
  $(function() {
    var form = $("#add-contents-form");
    var tasksTab = form.find("#tasks-tab");
    var contentTab = form.find("#content-tab");

    var modulesCheckAll = contentTab.find("#_module_content_all");
    var modulesOthers = contentTab.find("input:checkbox[name^='[module']:not([name$='all]'])");
    var modulesResultsAll = contentTab.find(".results-all");
    var modulesResults = contentTab.find(".result-cb");
    checkboxTree(modulesResultsAll, modulesResults);
    checkboxTree(modulesCheckAll, modulesOthers);

    var stepsCheckAll = contentTab.find("#_step_content_all");
    var stepsOthers = contentTab.find("input:checkbox[name^='[step']:not([name$='all]'])");
    checkboxTree(stepsCheckAll, stepsOthers);
  });

  function checkboxTree($select_all, $others) {
    // Update child checkboxes based on the parent "select all" checkbox
    $select_all.change(function() {
      $others.prop('checked', $(this).prop("checked"));
    });

    $others.change(function(){
      // Uncheck "select all" checkbox, if one of the listed checkbox item is unchecked
      if(!$(this).prop("checked")) {
          $select_all.prop('checked', false);
      }
      // Check "select all" checkbox if all checkboxes are checked
      if ($others.filter(':checked').length == $others.length ){
          $select_all.prop('checked', true);
      }
    });
  }

  function checkboxTree2() {
    $(".checkbox-tree input:checkbox").change(function() {
      // Update descendent checkboxes
      var $checkbox = $(this);
      var checkboxChecked = $checkbox.prop("checked");
      var $childCheckboxes = $checkbox.closest("li").find("ul input:checkbox");
      $childCheckboxes.each(function() {
        $(this).prop('checked', checkboxChecked);
      });

      // Update ancestor checkboxes
      var $checkboxesContainer;
      while (!$checkboxesContainer ||
             !$checkboxesContainer.hasClass("checkbox-tree")) {

        var $checkboxesContainer = $checkbox.closest("ul");
        var $parentCheckbox = $checkboxesContainer.siblings().find("input:checkbox");
        var $checkboxes = $checkboxesContainer.find("input:checkbox");
        var $checkedCheckboxes = $checkboxes.filter(':checked');

        $parentCheckbox.prop('checked',
         $checkboxes.length == $checkedCheckboxes.length);
        $checkbox = $parentCheckbox;
      }
    });
  }
  checkboxTree2();
</script>