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

Question

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;
    }
  }

This kind of problem is better handled using Angular Reactive Forms and a FormArray for the checkboxes. — Mike Robinson
– Mike Robinson, Commented Jun 11, 2022 at 16:08

Charlie V · Accepted Answer · 2022-06-11 17:09:53Z

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

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related