New Twiddle

components.checkbox-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: "input",
  isChecked: false,
  attributeBindings: ['type', 'checked'],
  type: 'checkbox',

  checked: function() {
    return this.get('isChecked');
  }.property('isChecked'),

  click: function() {
    console.log(this.set('checked', this.$().prop('checked')))
     Ember.set(this.get('targetObject.model')[this.get('index')], 'isSelected', this.$().prop('checked'));
  },
  
  actions : {
   deleteItems() {
     this.sendAction();
   }
  }
  
});

controllers.application.js

import Ember from 'ember';

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

controllers.index.js

import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
   deleteItems() {
     console.log(this.get('model'));
     var seletcedValues = this.get('model').filterBy('isSelected', true);
     alert(seletcedValues.length);
     this.set('model', this.get('model').filterBy('isSelected', false))
   }
  }
});

routes.index.js

import Ember from 'ember';

var aa = [ {isSelected: false, id : 1, claimStatus : 'Y', serialNumber: 'A', issueDescription: false},
         {isSelected: false, id : 2, claimStatus : 'Y', serialNumber: 'B', issueDescription: false},
         {isSelected: false, id : 3, claimStatus : 'N', serialNumber: 'C', issueDescription: false}]
export default Ember.Route.extend({
 
  setupController: function(controller, model) {
    this._super(controller, model);
    //if (model.get('autoEdit')) {
      controller.set('model', aa);
    controller.set('canDeleteMultiple', true);
 
    //}
  }
  
  
});

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>

templates.components.checkbox-component.hbs

{{yield}}

templates.index.hbs

<div class="container">
<h4>List</h4>
<div class="row">
    <div class="col-sm-3">
        <button style="background-color: green;"{{action "deleteItems"}}>Delete</button>
    </div>
<div class="container">
    <table class="table table-striped table-hover ">
        <thead>
            <tr>
                {{#if canDeleteMultiple}}<th>Select</th>{{/if}}
                <th>Action</th>
                <th>Claim ID</th>
                <th>Claim Status</th>
                <th>Serial Number</th>
                <th>Issue Description</th>
            </tr>
        </thead>
        <tbody>
            {{#each model as |warranty index|}}
                <tr>
                    {{#if canDeleteMultiple}}
                    {{checkbox-component isChecked=warranty.isSelected action=deleteItems index=index}}{{/if}}
                    <td>Edit<button class="btn btn-danger btn-xs" {{action "deleteWarranty" warranty}}>Delete</button></td>
                    <td>{{warranty.id}}</td>
                    <td>{{warranty.claimStatus}}</td>
                    <td>{{warranty.serialNumber}}</td>
                    <td>{{warranty.issueDescription}}</td>
                </tr>
            {{/each}}
        </tbody>
    </table> 
</div>
</div>
</div>

twiddle.json

{
  "version": "0.10.2",
  "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.7.0",
    "ember-data": "2.7.0",
    "ember-template-compiler": "2.7.0"
  },
  "addons": {}
}