Angular2 How to get all selected checkboxes

Question

So, I am working on an Angular2 application. I have a table where each entry represents a student and includes a checkbox

<input class="mycheckbox" type="checkbox" [value]='student.StudentId'> 

At some point, the user will click on the button, which should receive the value of all selected flags.

I am not sure to whom I should address this.

One idea is that each student will have the value checked or not. And this needs to be done using two-way bindings.

However, this will mean that every time you have to go through all the students

Is this the best option available? And is there something that matches the following jQuery:

 $('.mycheckbox:checked').each(function(){ 

Answer 1

I recently answered a similar question: fooobar.com/questions/279029 / ...

In the template, you can do the following:

 <input class="mycheckbox" type="checkbox" [(ngModel)]="student.selected">{{student.StudendId}} 

Then, to do something with the selected students:

 this.students.filter(_ => _.selected).forEach(_ => { ... }) 

Answer 2

Another way to do the same:

.html

 <button value="all" (click)="bulk('all')">ALL</button> <button value="none" (click)="bulk('none')">NONE</button> <div *ngFor="#students of student_list #i=index"> <input type="checkbox" value={{students.id}} class="checkedStudent" (change)="checkedStudents(students.id)" id={{students.id}}> </div> 

in the .ts file

 abc:Array<any>= []; checkedStudents(value) { console.log(value); if ((<HTMLInputElement>document.getElementById(value)).checked === true) { this.abc.push(value); } else if ((<HTMLInputElement>document.getElementById(value)).checked === false) { let indexx = this.abc.indexOf(value); this.abc.splice(indexx,1) } console.log(this.abc) } // for Bulk actions bulk(a) { // console.log(a); if (a == "all") { console.log("yes all"); this.abc = []; for (let i = 0; i < this.student_list.length; i++) { (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = true; this.abc.push(this.student_list[i].id); } } if (a == "none") { for (let i = 0; i < this.student_list.length; i++) { (<HTMLInputElement>document.getElementsByClassName("checkedStudent")[i]).checked = false; } this.abc = []; } console.log(this.abc); } 

Answer 3

Just add a condition to the button and do not forget to check the "value" of the check box as follows:

 <form #f="ngForm" (ngSubmit)="onSubmit(f.value)" > <div class="form-group"> <h2>Enter Email for Newsletter :</h2> <br/> <input #registrationemail="ngForm" ngControl="registrationemail" placeholder="Email Address" required type="email" class="form-control" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" /> <div *ngIf="registrationemail.touched && registrationemail.errors" class="alert alert-danger"> <div *ngIf="registrationemail.errors.required" >An Email is required</div> <div *ngIf="registrationemail.errors.pattern">Email is invalid</div> </div> </div> <div class="form-group"> <input id="accepttermsconditions" #accepttermsconditions="ngForm" ngControl="accepttermsconditions" type="checkbox" checked/> <label for="accepttermsconditions">Accept Terms and Conditions </label> </div> <button [disabled]="!f.valid || !accepttermsconditions.value" class="btn btn-primary" type="submit">Submit </button> </form> 

Answer 4

You can also do this using "formbuilder", compared to my previous one. post as follows:

 import {Component, OnInit} from '@angular/core'; import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from '@angular/common'; @Component({ selector: 'registration-form', directives: [FORM_DIRECTIVES], template: ` <form [ngFormModel]="myForm" (ngSubmit)="onSubmit(myForm.value)" class="ui form"> <div class="form-group"> <label for="registrationemailInput">EMail Address</label> <input type="email" required id="registrationemailInput" placeholder="email address" [ngFormControl]="myForm.controls['registrationemail']" class="form-control" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$" /> <div *ngIf="myForm.controls['registrationemail'].touched && myForm.controls['registrationemail'].errors" class="alert alert-danger"> <div *ngIf="myForm.controls['registrationemail'].errors.required" >An Email is required</div> <div *ngIf="myForm.controls['registrationemail'].errors.pattern">Email is invalid</div> </div> </div> <div class="form-group"> <label for="termsandconditions">Accept Terms &amp; Conditions</label> <input id="termsandconditions" type="checkbox" checked [ngFormControl]="myForm.controls['accepttermsconditions']" id="accepttermsconditions" /> </div> <button [disabled]="!myForm.valid || !myForm.controls['accepttermsconditions'].value" class="btn btn-primary" type="submit">Submit</button> </form>` }) export class FormbuilderComponent implements OnInit { myForm: ControlGroup; constructor(fb: FormBuilder) { this.myForm = fb.group({ 'registrationemail': ['test'], 'accepttermsconditions': [true] }) } ngOnInit() { } onSubmit(form: any): void { console.log('you submitted value:', form); } } 

Answer 5

PrimeNG DataTable has a built-in feature. Just set selectionMode to several to get a selection based on a checkbox. Live demo is at http://www.primefaces.org/primeng/#/datatableselection

Answer 6

• I simplified things a little for those using a list of Object values. XYZ.Comonent.html .

 <div class="form-group"> <label for="options">Options :</label> <div *ngFor="let option of xyzlist"> <label> <input type="checkbox" name="options" value="{{option.Id}}" (change)="onClicked(option, $event)"/> {{option.Id}}-- {{option.checked}} </label> </div> <button type="submit">Submit</button> </div> 

** XYZ.Component.ts **. 2. create a list - xyzlist. 3. Assign values, I pass values ​​from Java to this list. 4. Values: Int-Id, boolean -checked (Can Pass in Component.ts). 5. Now to get the value in Componenet.ts.

  onClicked(option, event) { console.log("event " + this.xyzlist.length); console.log("event checked" + event.target.checked); console.log("event checked" + event.target.value); for (var i = 0; i < this.xyzlist.length; i++) { console.log("test --- " + this.xyzlist[i].Id; if (this.xyzlist[i].Id == event.target.value) { this.xyzlist[i].checked = event.target.checked; } console.log("after update of checkbox" + this.xyzlist[i].checked); }