How to store selected checkbox value in Angular 4?

Question

I need an array with selected checkbox values.

This is my html:

<form [formGroup]="form" class="charts">
    <label formArrayName="charts" *ngFor="let chart of charts" id="form_charts">
        <input type="checkbox" value={{chart.title}} (change)="selected_chart($event)">
        {{chart.title}}
        <span class="checkmark"></span>
    </label>
</form>

And my function is:

selected_chart(e) {
    if (e.target.checked) {
        this.c_value = e.target.value;
        this.charts_selected.push(this.c_value);
    }
}

I have the array, but when we deselect the value still there; how to pop that value from the array? Any help will be appreciated

If it is possible for you push your code in Stackblitz or Plunker — Mohammad Daliri, Jul 17 '18 at 04:11

score 1 · Answer 1 · answered Jul 17 '18 at 03:43

1

You can use $event.srcElement in chnage like this

<input type="checkbox" (change)="selected_chart($event.srcElement)">

and get value with input: HTMLInputElement

selected_chart(input: HTMLInputElement) {
    input.checked === true
      ? console.log('true')
      : console.log('false');
  }

test on stackblitz

answered Jul 17 '18 at 03:43

Mohammad Daliri

1,370
6
20
43

but the unselected value is still in the array – NJKannur Jul 17 '18 at 03:57
@NJKannur to set the value you can use **[(ngModel)]** or **[checked]** . see this example [link](https://stackoverflow.com/a/40214714/2585074) – Mohammad Daliri Jul 17 '18 at 04:09
No.. i get the true and false value..that is not a matter..but i need something to pop the content if the selected value is deselected – NJKannur Jul 17 '18 at 08:55

score 0 · Answer 2 · answered Jul 17 '18 at 04:02

You can use $event to detect the change

 <label> Checkbox 1</label>
<input type="checkbox" name="checkbox1" (change)="selected_chart($event)">
<label> Checkbox 2</label>
<input type="checkbox" name="checkbox2" (change)="selected_chart($event)">
<br>
<label> Check box Status</label>
  Check box 1 : {{selected_checkbox.checkbox1}}
<br>  
  Check box 1 : {{selected_checkbox.checkbox2}}

Create an object in component.ts so that you can toggle the change event

selected_checkbox = {};
   selected_chart(event) {
     this.selected_checkbox[event.target.name] = event.target.checked;
  }

Checkout the Stackblitz Example

score 0 · Answer 3 · answered Jul 17 '18 at 04:18

Can't you use something like this?

<form [formGroup]="form" class="charts">
<label formArrayName="charts" *ngFor="let chart of charts" id="form_charts">
  <input type="checkbox" value={{chart.title}} [(ngModel)]="chart.checked">
  {{chart.title}}
  <span class="checkmark"></span>
</label>

Then each item of charts array will have the corresponding checked attribute. When you want to calculate charts_selected array you can iterate charts array and do that as below.

  calculateSelectedArray() {
for (const chart of this.charts) {
    if (chart.checked) {
    this.charts_selected.push(chart.something);
    }
}

}

Also you may call **calculateSelectedArray()** from this – Malindu Sandaruwan Jul 17 '18 at 04:19 — Malindu Sandaruwan, Jul 17 '18 at 04:19

score 0 · Answer 4 · answered Jul 17 '18 at 04:22

So I just notice this way could help.
You should save your checkbox by the position of the current title, right now your code is to push the boolean into the array, which couldn't tell you what value it stand for actually.
So we could simply save the value into the array like this:

 <form [formGroup]="form" class="charts">
  <label formArrayName="charts" *ngFor="let chart of charts; ; let i = index" id="form_charts">
  <input type="checkbox" value={{chart.title}} (change)="selected_chart(i)">
  {{chart.title}}
  <span class="checkmark"></span>
</label>

selected_chart(i: number) {
  this.selected_checkbox[i] = !this.selected_checkbox[i];
}

Whenever you select the checkbox, we just simply reverse its value in the array.

score 0 · Answer 5 · answered Mar 04 '22 at 05:39

selected_chart(e) {
    if (event.target.checked) {
      this.c_value = e.target.value;
      this.charts_selected.push(this.c_value);
    } else {
      this.c_value = e.target.value;
      const index = this.charts_selected.findIndex(item => item === c_value );
      this.charts_selected.splice(index);
    }
}

You can try this way... if you unchecked any value it will go into else block and remove that from array.

How to store selected checkbox value in Angular 4?

5 Answers5