How To check If My List Of Checkbox is Checked or Unchecked AngularJS 2

Question

I have a list of checkbox.

documentType: IDocument[] = [
    {
      "type": "A",
      "checked": false,
    },
    {
      "type":"B",
      "checked": false,
    },
    {
      "type":"C"    ,
      "checked": false,
    }];

I display this array in a list of checkbox on the template :

<ion-list *ngFor="let type of documentType">
  <ion-item >
   <ion-label>{{type.documentTypeName}}</ion-label>
       <ion-checkbox [(ngModel)]="type.checked"            (click)="checkBoxChecked(type.documentTypeName)" disabled="false" ></ion-checkbox>
  </ion-item>
</ion-list>

back to the component i created the checkBoxChecked method:

  checkBoxChecked(documentTypeinput)
  {
    if (documentTypeinput =="A")
    {
      console.log("this A");
    }
    else if (documentTypeinput=="B"){
      console.log("B")
    }
    else if (documentTypeinput=="C"){
      console.log("C")
    }
  }

But this is not the appropriate way. i can't know what element is checked or unchecked. Can you help me to figure out the best practice to work with multiple checkboxs. because i want to set the array with services. and i want my code reusable. so i will change only the web api. thank you in advance

YounesM · Accepted Answer · 2017-03-24 09:50:26Z

2

Since you're binding your checkbox to your objects using [(ngModel)]="type.checked", you already have all the data you need. You'll just have to loop on your array to check what checkbox is checked.

checkBoxChecked()
{
    this.documentType.forEach(e => {
        if(e.checked){
            console.log(e.type+' is checked !")
        }
    });
}

edited Mar 24, 2017 at 9:50

answered Mar 24, 2017 at 9:45

YounesM

2,31717 silver badges30 bronze badges

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

3 Comments

Hamdy Over a year ago

thank you for your reply. it will be on every if() statement. imagine that i have 50 elements in that array!

YounesM Over a year ago

What do you mean by on every if statement ?

Hamdy Over a year ago

my bad.i am not wearing my glasses. thank you for you reply. it work like a charm

Vikas Mahajan · Accepted Answer · 2017-03-24 12:32:31Z

1

<li *ngFor="let col of data" class="form-group">
   <input type="checkbox" name="col" value=" {{col.value}}" [(ngModel)]="col.value" (change)="addColumns(col)" />{{col.name}}
</li>

 data:any[]=[{"id":"13","name":"AAA"},{"id":"15","name":"BBB"}, {"id":"20","name":"CCC"}]
 constructor() {}
 get selectedcheckboxes() {
     return this.data
       .filter(opt => opt.value)  
 }

addColumns(col){
  this.selectedcheckboxes;
  console.log(this.selectedcheckboxes)
}


 See The demo below using the property binding-ngModel  :

DEMO

edited Mar 24, 2017 at 12:32

answered Mar 24, 2017 at 10:44

Vikas Mahajan

3551 silver badge7 bronze badges

Collectives™ on Stack Overflow

How To check If My List Of Checkbox is Checked or Unchecked AngularJS 2

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related