如何以编程方式设置或重置复选框

时间:2017-08-15 19:06:06

标签: angular checkbox programmatically

目的:当选中或取消选中特定复选框时,程序必须根据编程规则更改许多其他复选框。

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

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

无论onChangeChk如何设置,复选框都保持原始状态。

感谢您的帮助。 : - )

2 个答案:

答案 0 :(得分:4)

您可以将input元素的checked属性指定为true或false。

像这样:

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

另见:https://www.w3schools.com/jsref/prop_checkbox_checked.asp

答案 1 :(得分:0)

如果您有 CheckBox

<mat-checkbox
  [checked]="filterStatusPrivatUser"
  #privatUserCheckbox>Privat User</mat-checkbox>

您可以使用 ViewChild 访问已检查的属性,如下所示:

import { ElementRef } from '@angular/core';

filterStatusPrivatUser: boolean = true;

@ViewChild('privatUserCheckbox') privatUserCheckbox: ElementRef;

然后以编程方式更改值:

changeCheckboxProgramatically() {
    this.privatUserCheckbox['checked'] = true;
}