In my ponent I am trying to unselect all checkboxes with the same class name.

querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything.

this is the function. I know its wrong to use jQuery like that but it illustrates my goal.

unsetAllOptions(){
    var self = this;
    var i = 0;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelector("input.option_input")[i];
        if(element.checked){
            // console.log(i)
            console.log('unchecking:',i);
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });
}

In my ponent I am trying to unselect all checkboxes with the same class name.

querySelector selects only the first one each time (or once)... and querySelectorAll does not select anything.

this is the function. I know its wrong to use jQuery like that but it illustrates my goal.

unsetAllOptions(){
    var self = this;
    var i = 0;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelector("input.option_input")[i];
        if(element.checked){
            // console.log(i)
            console.log('unchecking:',i);
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });
}

• javascript
• angular
• angular2-ngmodel

• Check this solution stackoverflow./a/45608352/1713468 – Karthick Manoharan Commented Apr 17, 2018 at 20:08
• i see that works but i cant understand all the unit mentions. Im hoping to find some kind of query selector and not do formBuilder – Omar Commented Apr 17, 2018 at 20:38

2 Answers 2

To achieve expected result, use below option

Option 1:

As you are using .each method, using index and value you can avoid querySelectorAll, reference - http://api.jquery./jquery.each/

$("input.option_input").each(function(index,element){
        if(element.checked){
            element.checked=false;
            element.dispatchEvent(new Event('change'));
            element = "";
        }
    });

code sample - https://codepen.io/nagasai/pen/aGoMKz?editors=1010

Option 2

Option2 and preferred way is to avoid document.querySelectorAll ,as it fetches all matching elements of the DOM irrespective of the current ponent

Steps to achieved expected result,

1. Use Renderer and ElementRef to fetch current ponent elements
2. Use this.elem.nativeElement.querySelectorAll for fetching matching elements

ponent.ts

import { Component, Renderer, ElementRef } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.ponent.html',
  styleUrls: [ './app.ponent.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  constructor(private renderer: Renderer, private elem: ElementRef){}

  unsetAllOptions(){
    const elements = this.elem.nativeElement.querySelectorAll('.option_input');
    elements.forEach(element => {
     if(element.checked){
        element.checked = false
     }
});
 }
}

ponent.html

<hello name="{{ name }}"></hello>
<p>
  Start editing to see some magic happen :)
</p>

<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input" checked>
<input type="checkbox" class="option_input">

<button (click)="unsetAllOptions()">UncheckAll</button>

code sample - https://stackblitz./edit/angular-aei58i?file=app/app.ponent.html

this worked for me but if you know a better way. Let me know

unsetAllOptions(){
    var self = this;
    var i = -1;
    $("input.option_input").each(function(){
        i++;
        var element = self.elRef.nativeElement.querySelectorAll("input.option_input")[i];
        element.checked=false;
    });
}