如何在TypeScript中修改复选框的选中状态？

先修正原生DOM操作的错误 #

你写的代码有两个关键问题：

• 方法名写错了：不存在document.getElementByName，正确的是document.getElementsByName，这个方法返回的是多个元素的集合（NodeList），不是单个元素。
• TypeScript类型限制：集合里的元素默认是Element类型，没有checked属性，必须手动断言成HTMLInputElement才能访问这个属性。

修正后的代码：

// 取第一个匹配的复选框，同时断言类型
const checkbox = document.getElementsByName('myCheck')[0] as HTMLInputElement;
// 先判断元素是否存在，避免报错
if (checkbox) {
  checkbox.checked = true;
}

更推荐的Angular写法（不直接操作DOM） #

Angular是数据驱动框架，尽量别用原生DOM操作，用模板引用变量+ViewChild更规范：

1. 给模板里的复选框加引用变量：

<input #myCheckbox class="form-check-input" type="checkbox" [name]="myCheck">

2. 在组件类里获取并修改状态：

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

@Component({
  // 你的组件元数据（比如selector、templateUrl这些）
})
export class YourComponent implements AfterViewInit {
  @ViewChild('myCheckbox') myCheckbox!: ElementRef<HTMLInputElement>;

  ngAfterViewInit() {
    // 等视图渲染完成后再操作元素
    this.myCheckbox.nativeElement.checked = true;
  }
}

另外注意：你模板里的[name]="myCheck"是属性绑定，实际渲染后的name值是组件类里myCheck变量的内容，如果这个变量的值不是"myCheck"，那用getElementsByName('myCheck')会找不到元素，这点要确认。

内容的提问来源于stack exchange，提问作者Mohamed Jihed Jaouadi