javascript - checkbox inside ngFor, only first checkbox is getting selected & deselected everytime when clicking any oth

admin管理员组

文章数量:1401641

I have checkboxes inside a ngFor loop and when I click on any one of the checkboxes only the first one is getting checked & unchecked and updating only first one's status.

HTML template :

<div *ngFor="let num of count" class="m-b-20"> 
    <div class="checkbox"> 
        <input type="checkbox" id="check" name="num.value" value="num.checked" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
        <label for="check"></label> 
    </div>
    {{num.checked}} 
</div>

I have checkboxes inside a ngFor loop and when I click on any one of the checkboxes only the first one is getting checked & unchecked and updating only first one's status.

HTML template :

<div *ngFor="let num of count" class="m-b-20"> 
    <div class="checkbox"> 
        <input type="checkbox" id="check" name="num.value" value="num.checked" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
        <label for="check"></label> 
    </div>
    {{num.checked}} 
</div>

• javascript
• html
• css
• angular
• checkbox

Share Improve this question Follow edited May 11, 2018 at 10:43 Guillaume Georges 4,02044 gold badges1616 silver badges3434 bronze badges asked May 11, 2018 at 9:37 Deepshikha ChaudharyDeepshikha Chaudhary 39833 silver badges1111 bronze badges 7

• 2 please, provide your template code. – Adrii Commented May 11, 2018 at 9:39
• Can your share the code what all you have tried so far? – Harsh Jaswal Commented May 11, 2018 at 9:40
• <div *ngFor="let num of count" class="m-b-20"> <div class="checkbox"> <input type="checkbox" id="check" name="num.value" value="num.checked" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> <label for="check"></label> </div>{{num.checked}} </div> – Deepshikha Chaudhary Commented May 11, 2018 at 9:45
• This is my HTML code – Deepshikha Chaudhary Commented May 11, 2018 at 9:46
• Thanks, I've updated the answer including your code – Ignacio Ara Commented May 11, 2018 at 9:50

 |  Show 2 more ments

6 Answers 6

Sorted by: Reset to default 3

Check value for name, you've used different for each element: num.value. This should be the same so that it works:

<div *ngFor="let num of count" class="m-b-20">
    <div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" (click)="clicked(num)" ngDefaultControl/> 
    <label for="check"></label> </div>{{num.checked}}
</div>

checkbox-list is the new name

I think you are having the same name for the checkboxes. On iterating try to give different names to the checkbox. It will work.

First remove id and value atttribute from your code.

<div *ngFor="let num of count" class="m-b-20">
<div class="checkbox"> <input type="checkbox" name="checkbox-list" [(ngModel)]="num.checked" [checked]="num.checked==true" (click)="clicked(num)" ngDefaultControl/> 
<label for="check"></label> </div>{{num.checked}}

this atttribute doesn't need if you are using[(ngModel)] in checkbox. check this will be working fine.

I had similar issue in Angular 6/ Bootstrap 4. When clicking on label, it would not check the checkbox. When clicking on checkbox, it would work, but clicking on label, it would not work.

Posting my solution here for future reference.

<ng-container *ngFor="let item of items">
     <div class="col-5 col-sm-5">
      <div class="form-group form-check">

        <!-- wrap the label around the checkbox -->
        <label class="form-check-label">
          <input type="checkbox" class="form-check-input" name="item_check" id="check_{{item.ID}}">
           {{item.name}}
        </label>
    </div>
   </div>
</ng-container>     

So if you notice, I had to wrap the checkbox inside the label.

bind the id in input tag, and for in label tag.

<div *ngFor="let num of count" class="m-b-20">
  <div class="checkbox">
    <input type="checkbox" name="checkbox-list" [id]="num.value" (click)="clicked(num)" ngDefaultControl/>
    <label [for]="num.value"></label>
  </div>
  {{num.checked}}
</div>

The problem is that id is same for all of them , so dynamically add something to each row's id and for respectively then it will work

本文标签：