$('input[type="checkbox"]').change(function(e) {
  var checked = $(this).prop("checked"),
    container = $(this).parent(),
    siblings = container.siblings();

  container.find('input[type="checkbox"]').prop({
    indeterminate: false,
    checked: checked
  });

  function checkSiblings(el) {
    var parent = el.parent().parent(),
      all = true;
      
    el.siblings().each(function() {
      return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
    });
    
    if (all && checked) {
      parent.children('input[type="checkbox"]').prop({
        indeterminate: false,
        checked: checked
      });
      
      checkSiblings(parent);
    } else if (all && !checked) {
      parent.children('input[type="checkbox"]').prop("checked", checked);
      parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
      checkSiblings(parent);
    } else {
      el.parents("li").children('input[type="checkbox"]').prop({
        indeterminate: true,
        checked: true
      });
    }
  }
  checkSiblings(container);
});

body {
  padding: 20px;
}

ul {
  list-style: none;
  margin: 5px 20px;
}

li {
  margin: 10px 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<h1>Indeterminate Checkboxes</h1>

<ul>
  <li>
    <input type="checkbox" name="tall" id="tall">
    <label for="tall">Tall Things</label>

    <ul>
      <li>
        <input type="checkbox" name="tall-1" id="tall-1">
        <la...*Removed lengthy HTML code for brevity*...

$(document).ready(function() {

  var checkboxes = document.querySelectorAll('input.subOption'),
    checkall = document.getElementById('option');

  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].onclick = function() {
      var checkedCount = document.querySelectorAll('input.subOption:checked').length;

      checkall.checked = checkedCount > 0;
      checkall.indeterminate = checkedCount > 0 && checkedCount < checkboxes.length;
    }
  }

  checkall.onclick = function() {
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = this.checked;
    }
  }
});

.container-check input:indeterminate~.checkmark {
  background: #25a5bd;
}

.container-check input:indeterminate~.checkmark:before {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 10%;
  transform: translate(0, -50%);
  width: 80%;
  height: 3px;
  background: white;
}


/* Customize the label (the container) */

.container-check {
  position: relative;
  padding-left: 25px;
  margin-bottom: 11px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  font-weight: normal;
}

.container-list ul {
  list-style: none;
  margin-left: -14px;
}


/* Hide the browser's default checkbox */

.container-check input {
  position: absolute;
  opacity: 0;
}


/* Create a custom checkbox */

.checkmark {
  position: absolute;
  top: 0;
  left: 0;
  height: 16px;
  width: 16px;
  background-color: #fff;
  border: solid 1px #626579;
  border-radius: 4px;
}


/* When the checkbox is checked, add a blue background */

.container-check input:checked~.checkmark {
  background-color: #25a5bd;
  border: solid 1px #25a5bd;
}


/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}


/* Show the checkmark when checked */

.container-check input:checked~.checkmark:after {
  display: block;
}


/* Style the checkmark/indicator */

.container-check .checkmark:after {
  left: 5px;
  top: 2px;
  width: 4px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}


/* disabled checkmark */

.container-check.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}


/* Intermediate css */

.container-check .intermediate:after {
  left: 5px;
  top: 2px;
  width: 0px;
  height: 9px;
  border: solid white;
  border-width: 0px 0px 6px 3px;
  -webkit-transform: rotate(90deg);... *Continued CSS code removed for brevity*

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container-list">
  <ul>
    <li>
      <label class="container-check" for="option"><input id="option" type="checkbox"><span class="checkmark"></span>
      Checkbox Selected</label>
      <ul>
        <li>
          <label class="container-check">
          <input class="subOption" type="checkbox">
          <span class="checkmark"></span>
          Checkbox label 01</label>
        </li>
        <li>
          <label class="container-check">
          <input class="subOption" type="checkbox">
          <span class="checkmark"></span>
          Checkbox label 02</label>
        </li>
        <li>
          <label class="container-check">
          <input class="subOption" type="checkbox">
          <span class="checkmark"></span>
          Checkbox label 03</label>
        </li>
      </ul>
    </li>
  </ul>
</div>