<div class="container">
  <ul>
    <li>
      <input type="checkbox" id="option"><label for="option"> Electronics</label>
      <ul>
        <li><label><input type="checkbox" class="subOption"> Laptops</label></li>
        <li><label><input type="checkbox" class="subOption"> TVs</label></li>
        <li><label><input type="checkbox" class="subOption"> Microphones</label></li>
      </ul>
    </li>
  </ul>
</div>
body {
  color: #555;
  font-size: 1.25em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

hr {
  margin: 50px 0;
}

ul {
  list-style: none;
}

.container {
  margin: 40px auto;
  max-width: 700px;
}

li {
  margin-top: 1em;
}

label {
  font-weight: bold;
}
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;
  }
}