how to programmatically set or reset checkbox

angular checkbox programmatically
Yogi Bear picture Yogi Bear · Aug 15, 2017 · Viewed 9.8k times · Source

Purpose: when a particular checkbox is checked or unchecked, the program must change a number of other checkboxes according to programmed rules. 

<input type="checkbox" id="chkbox" (change)="onChangeChk($event)">Test Checkbox

  onChangeChk($event) {
    $event.srcElement.value = "on"; // or "off"
  }

The checkbox remains in its original state no matter how the onChangeChk sets it.

Thanks for you help on this. :-)

Answer

LarsMonty picture LarsMonty · Aug 15, 2017

You can assign the checked property of your input element to true or false.

Like so:

onChangeChk($event) {
    $event.srcElement.checked = true; // or false
}

See also here : https://www.w3schools.com/jsref/prop_checkbox_checked.asp

Related questions

Angular 2 Checkbox Two Way Data Binding

I´m fairly new to Angular2 and I have a little problem: In my Login-Component-HTML, I have two checkboxes, which I want to bind in two way data-binding to the Login-Component-TypeScript. This is the HTML: <div class="checkbox"> &…

Read More
Angular 2: Get Values of Multiple Checked Checkboxes

My problem is really simple: I have a list of checkboxes like this: <div class="form-group"> <label for="options">Options :</label> <label *ngFor="#option of options" class="form-control"> <input type="checkbox" …

Read More
Angular ReactiveForms: Producing an array of checkbox values?

Given a list of checkboxes bound to the same formControlName, how can I produce an array of checkbox values bound to the formControl, rather than simply true/false? Example: <form [formGroup]="checkboxGroup"> <input type="checkbox" id="checkbox-1" …

Read More