How to add multiple selected checkbox values to an array using Javascript?

Question

I have an input element being populated using the *ngFor loop fetching the data from another array. On selecting multiple checkboxes, I need their values to be pushed into my empty array 'selectedArr'. Find below the code:

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  title = "CodeSandbox";
  toDo = ["Test", "Eat", "Sleep"];
  task: string;
  addTask(task: string) {
    this.toDo.push(task);
  }
  selectedArr = [];
  deleteValue() {}

  addSelected(i) {
    let checkId = document.getElementsByClassName("i");
    console.log(checkId);
    if (checkId.checked === true) {
      this.selectedArr.push(i);
    }
    console.log(this.selectedArr);
  }
}

<div>
  <div class="form-group">
    <label>Add a Task: </label>
    <input class="form-control" type="text" [(ngModel)]="task" />
  </div>
  <button (click)="addTask(task)">Add</button>
  <br />
  <br />
  <div>
    My To Do List:
    <ul>
      <li *ngFor="let todo of toDo, index as i">
        <input class="i" type="checkbox" (click)="addSelected(i)" />
        {{todo}}
      </li>
    </ul>
  </div>
  <div class="btn class">
    <button class="btn btn-primary" (click)="deleteValue()">Delete</button>
  </div>
</div>

You should first read how to build a form with ReactiveForms. And you should never try to get element from the DOM (document.getElementsByClassName) with Angular. — LaurentG
– LaurentG, Commented Mar 10, 2020 at 13:16

Adrita Sharma · Accepted Answer · 2020-03-10 13:19:09Z

2

Try like this:

.html

 <li *ngFor="let todo of toDo, index as i">
     <input class="i" type="checkbox" [(ngModel)]="checked[i]" (ngModelChange)="addSelected(todo,$event)" />
    {{todo}}
 </li>

.ts

  checked = []

  selectedArr = [];


  addSelected(item,evt) {
    if (evt) {
      this.selectedArr.push(item);
    }else {
      let i = this.selectedArr.indexOf(item)
      this.selectedArr.splice(i,1)
    }
  }

Working Demo

answered Mar 10, 2020 at 13:19

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

palaѕн · Accepted Answer · 2020-03-10 13:20:35Z

0

The getElementsByClassName method of Document interface returns an array-like object of all child elements which have all of the given class name(s). Since you are passing the index, you can access the clicked element like:

addSelected(i) {
   let checkId = document.getElementsByClassName("i")[i];
   console.log(checkId);
   if (checkId.checked) {
      this.selectedArr.push(i);
   } else {
      // Remove the index from selectedArr if checkbox was unchecked
      let idx = this.selectedArr.indexOf(i)
      if (idx > -1) this.selectedArr.splice(idx, 1)
   }
   console.log(this.selectedArr);
}

answered Mar 10, 2020 at 13:20

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

Comments

Eliseo · Accepted Answer · 2020-03-10 15:54:11Z

0

please, the things easy works easy. You needn't actually manually the array. You should use a function (*)

get selectedArray()
{
    return this.toDo.filter((x,index)=>this.checked[index])
}

<li *ngFor="let todo of toDo, index as i">
     <!--remove (ngModelChange) -->
     <input class="i" type="checkbox" [(ngModel)]="checked[i]" />
    {{todo}}
</li>
{{selectedArray}}

(*) this allow you "start" the app with some selected

edited Mar 10, 2020 at 15:54

answered Mar 10, 2020 at 15:10

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Collectives™ on Stack Overflow

How to add multiple selected checkbox values to an array using Javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related