// Vanilla version of https://codepen.io/chriscoyier/pen/JYyXjX
const getParentCheckbox = $container => {
  const $checkboxes = Array.from(
    $container.parentElement.parentElement.children // @note: we rely heavily on the hierarchy of the markup here …
  ).filter($el => {
    return $el.nodeName === "INPUT";
  });

  return $checkboxes.length ? $checkboxes[0] : null;
};

const checkSiblings = ($container, checked) => {
  const $siblings = $container.parentElement.children;
  
  // Determine if all siblings are checked/unchecked too
  const allSiblingsHaveSameState = Array.from($siblings).reduce((result, $sibling) => {
    const $siblingCheckbox = $sibling.querySelector('input[type="checkbox"]');   
    return (
      result &&
      $siblingCheckbox.checked === checked && 
      !$siblingCheckbox.indeterminate
    );
  }, true);

  // Get Parent Checkbox
  let $parentCheckbox = getParentCheckbox($container);

  if ($parentCheckbox) {
    // All siblings checked/unchecked?
    // ~> Check/Uncheck parent too, and then check its siblings too
    if (allSiblingsHaveSameState) {
      // Set parent checkbox to same checked
      $parentCheckbox.checked = checked;
      $parentCheckbox.indeterminate = false;

      // Check parent checkbox's siblings too (if any)
      checkSiblings($parentCheckbox.parentElement, checked);
    } else {
      // Some siblings checked, some unchecked
      // ~> Set all parent checkboxes to indeterminate
      do {
        $parentCheckbox.checked = false;
        $parentCheckbox.indeterminate = true;
      } while ($parentCheckbox = getParentCheckbox($parentCheckbox.parentElement));
    }
  }
};

document.querySelectorAll('input[type="checkbox"]').forEach($checkbox => {
  $checkbox.addEventListener("change", function() {
    const checked = this.checked,
      $container = this.parentElement,
      $childCheckboxes = $container.querySelectorAll('input[type="checkbox"]');

    // Check/Uncheck all children too
    $childCheckboxes.forEach($childCheckbox => {
      $childCheckbox.indeterminate = false;
      $childCheckbox.checked = checked;
    });

    // Check siblings
    checkSiblings($container, checked);
  });
});