0

how to uncheck the checkbox using function in angular 2 typescript ?

I have added image as example !

<div class="filter2">
              <label class="containe" 
              *ngFor="let veh of vehicleClassArr">
              {{veh}}
              <input type="checkbox" name="{{veh}}" value="{{veh}}" (change)="filterSearchResults($event, veh,'vehicleClass')">
                  <span class="checkmark"></span>
              </label>
  </div>

<div class="reset-btn">


<button class="filter-reset-btn" (click)="resetFilters()">Reset to Default</button>

</div>

[1]: https://i.sstatic.net/aPrMH.png

3 Answers 3

2

To control checkbox in typescript you have to use something like this

var element = <HTMLInputElement> document.getElementById("IDOfCheckbox");
element.checked = true;
Sign up to request clarification or add additional context in comments.

1 Comment

I concur with you, even though it is quite discouraged to access the html DOM directly but this method works as expected.
0

First, you need object array which contains one string property to display and one boolean property i.e selected to check and uncheck the checkbox.

resetFilters(){
 this.vehicleClassArr.every(function(item:any) {
        return item.selected == false;
      })
}
<ul>
  <li> <input type="checkbox" [(ngModel)]="selectedAll" (change)="selectAll();"/>
  </li>
  <li *ngFor="let veh of vehicleClassArr"> 
  <input type="checkbox" [(ngModel)]="veh.selected">
  {{veh.name}}
  </li>
</ul>
<button class="filter-reset-btn" (click)="resetFilters()">Reset to Default</button>

Comments

0

Add an additional field "checked" to your vehicleClass-object and bind to this via ngModel

<div class="filter2">
          <label class="containe" 
          *ngFor="let veh of vehicleClassArr; let ndx=index;">
          {{veh}}
          <input id="myCheck{{ndx}}" type="checkbox" name="{{veh}}" value="{{veh}}" 
           [(ngModel)]="veh.checked" (change)="filterSearchResults($event, veh,'vehicleClass')">
              <span class="checkmark"></span>
          </label>
</div>

Then adjust your method resetFilters() as follows

private resetFilters(): void {
   this.vehicleClassArr.forEach(element => {
      element.checked = false;
   });
}

4 Comments

if I make additional checked all data coming from api will be checked.
Is this a question or a fact? Sorry, I don't get that. Each checkbox is handled on its own except when you use your resetFilters()-method.
I did as per your code.But Its not working.why I m not getting .but when I am trying with js like document.getElementById("myCheck").checked = false; it is working for one checkbox not for all checkbox bocz of id i think .can you tell how to solve that id issue .
Okay, unfortunately I can't tell you why my solution fails, as it is standard, but I now edited my post. Please have a look at the additional index out of the *ngFor-loop which then gets attached to your id-string. Now you can start a loop and then assemble each id like document.getElementById("myCheck" + i).checked = false;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.