如果在打字稿中选中复选框，如何阅读？

Posted 2023-03-13

【中文标题】如果在打字稿中选中复选框，如何阅读？

【英文标题】：How to read if a checkbox is checked in typescript?

【发布时间】：2022-01-16 23:34:04

【问题描述】：

这一定是一些基本的东西，我不知道该怎么做。如果选中复选框，我想在控制台中显示。我的 html 和 typescript 代码是：

  <div class="my-form-field" style="display: block;margin-bottom: 10px;">
        <mat-checkbox id="is3dCheckBox" (ngModel)="handleInputChange()">Split tag in bits</mat-checkbox>
  </div>

而.ts文件有handleInputChange()的功能

handleInputChange() 
    var element = <HTMLInputElement>document.getElementById("is3dCheckBox");
    var isChecked = element.checked;
    if (isChecked == true)
        console.log("Checked");
    if (isChecked == false)
        console.log("Not Checked");

我的控制台没有错误，但选中复选框时它不显示文本。我做错了什么？

【问题讨论】：

ng 模型如果发生变化则不用于绑定

我也试过ngModelChange，但没有成功。

【参考方案1】：

您可以绑定到mat-checkbox 的change 事件。

模板

<mat-checkbox (change)="onChange($event.checked)"></mat-checkbox>

组件类

onChange(checked) 
  console.log(checked);

还需要说明的是，在 Angular 中，您通常不需要直接引用 document 对象来访问 DOM 元素。对于这个 Angular 有ElementRef。

【参考方案2】：

你只需要使用类型断言来告诉 TypeScript 它是一个 HTMLInputElement：var element = document. getElementById("is3dCheckBox"); var isChecked = 元素。