Trying to Handle Removing Item From Array with Checkbox De-Select

I am trying to handle pushing and removing elements from an array based on whether a checkbox is checked or not in an Angular 2 app. I know native HTML can handle some form of this logic, but I'm trying to figure out exactly what to target. This is what my function looks like:

private onOptionSelected(option)
{
    let optionObj = {
        option: option,
        complex: false
    };

    if (option)
    {
        this.record.requestedOptions.push(optionObj);
    }
    else if (!option)
    {
        this.record.requestedOptions.splice(option);
    }
}

Right now, the first part works. I can check one of the checkboxes and that item gets added to the array and saved in my backend.

However, when I uncheck that item, rather than removing it from the array, that action ALSO triggers a new item being added to the array.

So how do I handle the negative case here -- where an item is unchecked, and should thus be removed from the array? Can I target a native HTML attribute like "checked" or "!checked" or something similar?

By the way, this is what my html/view looks like:

    <div>
       <md-checkbox 
          (change)="onOptionSelected('A')">Option A
       </md-checkbox>

       <md-checkbox
         (change)="onOptionSelected('b')">Option B
       </md-checkbox>

       <md-checkbox
         (change)="onOptionSelected('c')">Option C
       </md-checkbox>
   </div>