Run functions with checkbox interactions

I am trying to create checkboxes that will add an object to an array when checked, but will remove that object when unchecked. I am not sure if this is the correct way, but will show what I have below.

Original Code:

  <div>
   <ul>
    <a *ngFor="let perkResult of perkList.results" (click)="onAddPerk(perkResult)">
     <li></li>
     </a>
   </ul>
  </div>

  <div *ngFor="let perk of company.perks;>
     
    <a (click)="onDeletePerk(i)"></a>
  </div>

Functions:

 onAddPerk(perkResult) {
    // Adds a new perk to the array
  this.company.perks.push({perk: (perkResult.perk)});
 }

 onDeletePerk(i: number) {
   // Delete the perk in the selected index
   this.company.perks.splice(i, 1);
 }

And I want to do something like this:

  <div *ngFor="let benefitResult of benefitList.results" >
     <a (click)="onAddBenefit(benefitResult)">
      <input type="checkbox"  />   
     //Basically if checked then run add function, if not checked then run delete function
     </a> 
   </div>