Indeterminate/Checked Inputs in Ember

components.my-component.js

import Ember from 'ember';
import _ from "lodash";

const { computed, get, set, isEqual } = Ember;

export default Ember.Component.extend({
  items: [],
  selectedItems: [],
  
  allItems: computed.alias('items'),
  someItemsSelected: computed.gt('selectedItems.length', 0),
  
  isIndeterminate: computed('someItemsSelected', 'allItemsSelected', function() {
    return get(this, 'someItemsSelected') && !get(this, 'allItemsSelected');
  }),
  
  allItemsSelected: computed('allItems.length', 'selectedItems.length', function() {
  	return isEqual(get(this, 'allItems.length'), get(this, 'selectedItems.length'));
  }),
  
  actions: {
    toggleAllItems: function(event) {
      event.target.checked = false;
      
      if (get(this, 'someItemsSelected')){
       set(this, 'selectedItems', []);
      } else {
       set(this, 'selectedItems', get(this, 'allItems').toArray());
      }
    },
    
    selectItem: function(item, { target: { checked }}) {
      if (checked) {
        get(this, 'selectedItems').pushObject(item);
      } else {
        get(this, 'selectedItems').removeObject(item);
      }
    }
  },
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  items: [ {name: 'milk'}, {name: 'eggs'}, {name: 'cheese'} ]
});

templates.application.hbs

<h1>My Grocery List</h1>
<br>
{{my-component items=items}}
<br>
<br>

To recreate this bug:
<ul>
	<li> Select one or more items </li>
  <li> Uncheck them - note that the total count and checkbox reset correctly to 0</li>
  <li> Select one or more items (not all three) and note 'allItemsSelected' is false </li>
  <li> Check the indeterminate checkbox to unselect all items</li>
  <li> Note that even though 'allItemsSelected' is false, the checkbox is selected</li>
</ul>

templates.components.my-component.hbs

<input 
  type="checkbox"
  class="my-input"
	checked={{allItemsSelected}}
  indeterminate={{isIndeterminate}}
  onclick={{action "toggleAllItems"}}>

{{selectedItems.length}} of {{allItems.length}}
(allItemsSelected == {{allItemsSelected}})
(someItemsSelected == {{someItemsSelected}})
{{selectedItems.length}} / {{allItems.length}}

{{isIndeterminate}}
<br>

{{#each items as |item|}}
	<div>
	<input
  	type="checkbox"
    checked={{contains item selectedItems}} 
    onchange={{action "selectItem" item}}>
  {{item.name}}
  </div>
  <br>
{{/each}}

twiddle.json

{
  "version": "0.12.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.12.0",
    "ember-template-compiler": "2.12.0",
    "ember-testing": "2.12.0"
  },
  "addons": {
    "ember-data": "2.12.1",
    "ember-composable-helpers": "1.1.3",
    "ember-lodash": "4.17.4",
    "ember-truth-helpers": "1.0.0"
  }
}

👍