indeterminate-checkboxes

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

{{indeterminate-checkboxes}}

indeterminate-checkboxes.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  didInsertElement() {
    this._super(...arguments);
      Ember.$('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: false
              });
          }
        }

        checkSiblings(container);
      });
    
  },
  
  actions: {
    somethingChanged(thing) {
      console.log(thing + ' changed');
    }
  }
  
});

indeterminate-checkboxes.template.hbs

  <h2>Indeterminate List Checkboxes</h2>
  <ul>
    <li>
      <input {{action "somethingChanged" "All Things" on="change"}} type="checkbox" name="all" id="all">
      <label for="tall">All Things</label>
  <ul>
    <li>
      <input {{action "somethingChanged" "Tall Things" on="change"}} type="checkbox" name="tall" id="tall">
      <label for="tall">Tall Things</label>
      <ul>
        <li>
          <input {{action "somethingChanged" "Buildings" on="change"}} type="checkbox" name="tall-1" id="tall-1">
          <label for="tall-1">Buildings</label>
        </li>
        <li>
          <input {{action "somethingChanged" "Giants" on="change"}} type="checkbox" name="tall-2" id="tall-2">
          <label for="tall-2">Giants</label>
          <ul>
            <li>
              <input {{action "somethingChanged" "Andre" on="change"}} type="checkbox" name="tall-2-1" id="tall-2-1">
              <label for="tall-2-1">Andre</label>
              <ul>
                <li>
                  <input {{action "somethingChanged" "Peanut" on="change"}} type="checkbox" name="tall-2-1-1" id="tall-2-1-1">
                  <label for="tall-2-1">Peanut?</label>
                </li>
              </ul>
            </li>
            <li>
              <input {{action "somethingChanged" "Paul Bunyan" on="change"}} type="checkbox" name="tall-2-2" id="tall-2-2">
              <label for="tall-2-2">Paul Bunyan</label>
            </li>
          </ul>
        </li>
        <li>
          <input {{action "somethingChanged" "Two Sandwiches" on="change"}} type="checkbox" name="tall-3" id="tall-3">
          <label for="tall-3">Two sandwiches</label>
        </li>
      </ul>
    </li>
    <li>
      <input {{action "somethingChanged" "Short Things" on="change"}} type="checkbox" name="short" id="short">
      <label for="short">Short Things</label>
      <ul>
        <li>
          <input {{action "somethingChanged" "Smurfs" on="change"}} type="checkbox" name="short-1" id="short-1">
          <label for="short-1">Smurfs</label>
        </li>
        <li>
          <input {{action "somethingChanged" "Mushrooms" on="change"}} type="checkbox" name="short-2" id="short-2">
          <label for="short-2">Mushrooms</label>
        </li>
        <li>
          <input {{action "somethingChanged" "One Sandwich" on="change"}} type="checkbox" name="short-3" id="short-3">
          <label for="short-3">One Sandwich</label>
        </li>
      </ul>
    </li>
  </ul>
  </li>
  </ul>

twiddle.json

{
  "version": "0.4.11",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}