How to uncheck checkboxes on a button click?

Question

I have the following 3 input checkboxes, after checking the checkboxes, I would like to clear all the checked items after the "Clear Checkbox" button is clicked. I attempted the following but it doesn't work.

Stackblitz working Example

app.component.html

<ul *ngFor="let d of data">
  <li>
    <input id="checkbox" type="checkbox" class="checkbox" />
    {{ d }}
  </li>
</ul>

<button (click)="myFunction()">Clear Checkbox</button>

app.component.ts

export class AppComponent {
  data = ['tea', 'coffe', 'soda'];
  public myFunction() {
    (<HTMLInputElement>document.getElementById('checkbox')).checked === false;
  }
}

Try <HTMLInputElement>document.getElementById('checkbox')).checked = false, With ===, you are making a comparison. — T.Trassoudaine
– T.Trassoudaine, Commented Nov 12, 2021 at 17:30
@T.Trassoudaine my bad, now it works but only changes value to one item — yellowSub
– yellowSub, Commented Nov 12, 2021 at 17:32
Yes because you are selecting by id, you can't have several HTML elements with same id, use class instead. Nimitt Shah answer gives details. — T.Trassoudaine
– T.Trassoudaine, Commented Nov 12, 2021 at 17:34
You should really investigate the Angular Way of doing this. This implementation will cause you headaches eventually.. — MikeOne
– MikeOne, Commented Nov 12, 2021 at 17:43

Super Kai - Kazuya Ito · Accepted Answer · 2021-11-12 17:34:26Z

4

You can use document.querySelectorAll() to uncheck all the checkboxes.

StakBlitz Working Example

In myFunction, you code should be as below:

document.querySelectorAll('.checkbox').forEach(_checkbox=>{
    (<HTMLInputElement>_checkbox).checked = false;
});

Also, make sure you are assinging false value (=) not checking (===)!

edited Nov 12, 2021 at 17:34

Super Kai - Kazuya Ito

42.8k23 gold badges258 silver badges257 bronze badges

answered Nov 12, 2021 at 17:32

Nimitt Shah

4,6072 gold badges12 silver badges25 bronze badges

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

3 Comments

T.Trassoudaine Over a year ago

You still should make sure the id of the checkboxes are not all the same.

Nimitt Shah Over a year ago

yea, I am not using id

T.Trassoudaine Over a year ago

In the question and in your StackBlitz example, all the checkboxes have the id checkbox.

AVJT82 · Accepted Answer · 2021-11-12 18:56:27Z

3

I would do it in an angular fashion and use ViewChildren instead. So attach a ref to your checkboxes and access them with ViewChildren, as this would be a perfect case for that. So I attached chkboxes to the input

<input #chkboxes id="checkbox" type="checkbox" class="checkbox" />

I define the querylist:

@ViewChildren('chkboxes') chkboxes: QueryList<ElementRef>;

and to uncheck I loop the elements and set them to false:

myFunction() {
  this.chkboxes.forEach(x => x.nativeElement.checked = false)
}

DEMO

answered Nov 12, 2021 at 18:56

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

Collectives™ on Stack Overflow

How to uncheck checkboxes on a button click?

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