Ember JS component multiple checkboxes selection to array

I have an Ember frontend and i want to create a form with multiple checkboxes and somehow , either populate a collection of checked items upon check , or gather the selected checkboxes upon form submission

this is how i call my component

this is what happens in the template

                  
                    <div>
                      <label class="custom-checkbox form-control-inline">
                        
                        <span>Voice</span>
                      </label>
                      <label class="custom-checkbox form-control-inline">
                        
                        <span>Data</span>
                      </label>
                      <span></span>
                    </div>
                  
                  .
                  .
                  .
                  <button type="submit" class="btn btn-main" >Generate report </button>

The checkboxes should be 2 for each model instance so for example

Data Voice 
[]   []    Name1
[]   []    Name2

The way I'm trying to tackle it doesn't seem to work at the moment

So in my component:

import Ember from 'ember';

export default Ember.Component.extend({
  optionsData: [],
  optionsVoice: [],
  srOptions: [],
  checkedVoice:false,
  checkedData:false,

  didInsertElemet() {
    this.selectedItems = [];
  },

  actions: {

    checkboxChangedVoice(options, vessel, paramValue) {
      console.log(paramValue);
      console.log(this.get('checkedVoice'));
      //this populates an array with the checked boxes
      this.get('optionsVoice').push(vessel);
      console.log(this.get('optionsVoice'))
    },
    checkboxChangedData(options, vessel,paramValue) {
      console.log(paramValue);
      console.log(this.get('checkedData'));
      //this populates an array with the checked boxes
      this.get('optionsData').push(vessel);
      console.log(this.get('optionsData'))
    },
    buttonClicked(paramsScheduledReport, paramsUser, srOptions) {
      srOptions = this.get('srOptions')
      this.sendAction('action', paramsScheduledReport, paramsUser, srOptions);
    }
  }
});

this is also the last action in the controller, in case someone finds it useful

import Ember from 'ember';

export default Ember.Controller.extend({
 actions: {
        saveScheduledReport(newScheduledReport, user , vessel) {
            var controller = this;

   console.log(vessel.toArray())
            newScheduledReport.set('user', user);
   newScheduledReport.set('vessels',vessel);
   newScheduledReport.set('srOptions',vessel);
   //TODO: Add recipients array from form!
   newScheduledReport.set('reportRecipients',[])
            newScheduledReport.save().then(function() {
                controller.transitionToRoute('/');
            });
        },
    }
});

Now what happens in the component , when i click on a checkbox:

the console.log(paramValue) will always answer undefined and the console.log(this.get('checkedVoice') will always answer false

At the moment you might notice that the component is just appending values to the array , i was trying to implement the 'toggling' feature but i can't get access to the checked (true/false) value.

If you think my implementation is completely off please do suggest any other viable solution.

thank you guys.