How to add and subtract checkbox values in TypeScript (JavaScript)

I’m currently working on an Angular frontend with TypeScript. I’m trying to get the checkbox values from the array elements, which I’m iterating through in the HTML file with ngFor, and add those values to the total value. The total value should be displayed on the webpage.

I managed to get the value once a checkbox is selected, and to increase the total value according to the checked checkbox value. The logic for decreasing the total value once a checkbox gets unselected is missing though. That’s where I need some help.

Unfortunately I could not find the specific implementation of the substraction logic on unselect. Many SO posts included JQuery which I couldn’t use, because the JQuery code did not function despite having no errors (I installed Jquery in Angular with npm).

HTML file:

<span name="total" id="grandtotal">estimation total: {{grandtotal}}</span>

<ul *ngFor="let ticket of tickets">
  <li>
    <span>Estimation: {{ticket.estimation}}</span>
    <b>ID: {{ticket.id}}</b>
    
    <input
      type="checkbox"
      id="ticket.id"
      (click)= "calculateTotal(ticket.estimation)">
  <li/>
<ul/>

TypeScript file:

  totalValue: number = 0;

  public calculateTotal(checkboxValue: number): void {
    var checkboxes = <HTMLInputElement> document.getElementById('ticket.id');
    if(checkboxes.checked) {
      this.totalValue = this.totalValue + checkboxValue;
    }
  }

Answer

You can use an array of tickets to populate a template driven form.

Add a select attribute to your Ticket

type Ticket = {
  id: number;
  estimation: number;
  select: boolean;
};

Fill the array:

  tickets: Ticket[] = [
    { id: 1, estimation: 100, select: false },
    { id: 2, estimation: 150, select: false },
  ];

change the code to loop over all your tickets

  public calculateTotal(): void {
    let total = 0;
    this.tickets.forEach((el) => {
      if (el.select) {
        total += el.estimation;
      }
    });
    this.grandtotal = total;
    console.log('Calc');
  }

and change your HTML slightly:

<span name="total" id="grandtotal">estimation total: {{ grandtotal }}</span>

<ul>
  <li *ngFor="let ticket of tickets">
    <span>Estimation: {{ ticket.estimation }}</span>
    <b>ID: {{ ticket.id }}</b>
    <b> selection:{{ ticket.select }}</b>

    <input
      type="checkbox"
      id="ticket.id"
      [(ngModel)]="ticket.select"
      (change)="calculateTotal()"
    />
  </li>
</ul>

See working example in stackblitz: https://stackblitz.com/edit/angular-ivy-i7zmv2?file=src/app/app.component.ts