checkboxes

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  products: Array.from(Array(100), (_, i) => ({ id: i, name: `Product #${i}` })),
  
  displayItems: Ember.computed.map('products', product => ({ product, checked: false })),
  selectedItems: Ember.computed.filterBy('displayItems', 'checked'),
  selectedItemNames: Ember.computed('selectedItems.[]', function() {
    return this.get('selectedItems').mapBy('product.name').join(', ');
  }),
  
  actions: {
    toggleAll(checked) {
      for (const item of this.get('displayItems')) {
        Ember.set(item, 'checked', checked);
      }
    }
  }
});

templates.application.hbs

<p style="height: 200px; overflow: auto">
	Selected: {{selectedItemNames}}
</p>

<table>
  <tr>
    <th><input type="checkbox" onchange={{action 'toggleAll' value='target.checked'}}></th>
    <th>Item</th>
  </tr>
  {{#each displayItems as |item|}}
    <tr>
      <td><input type="checkbox" checked={{item.checked}} onchange={{action (mut item.checked) value='target.checked'}}></td>
      <td>{{item.product.name}}</td>
    </tr>
  {{/each}}
</table>

twiddle.json

{
  "version": "0.11.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.11.0",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.11.0",
    "ember-testing": "2.11.0"
  },
  "addons": {}
}