如何使用Angular 2实现全选复选框功能

问题描述 #

需要实现一个全选复选框，勾选时选中所在div内的所有复选框（该div仅包含复选框），现有代码无法正常实现需求。

原代码问题分析 #

HTML部分 #

• <label>的for属性值与复选框id不匹配，导致点击标签无法触发复选框状态切换
• 错误地给<label>绑定(check)事件，该事件应绑定在<input type="checkbox">上，且事件名应为(change)
• 模板引用变量#checkAll被错误放置在<label>上，应该绑定到复选框元素

TS部分 #

• 类属性初始化阶段直接访问this.checkAll.nativeElement会触发错误，此时组件未完成初始化，checkAll还未赋值
• selectAll方法中的遍历逻辑写法错误，无法正确设置子复选框状态
• checkboxes变量过早获取DOM元素，应该在组件初始化完成后再执行查询

修正后的代码 #

TS文件 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html'
})
export class YourComponent implements OnInit {
  @ViewChild('checkAll') checkAll!: ElementRef<HTMLInputElement>;
  checkboxes: NodeListOf<HTMLInputElement> | undefined;

  constructor() { }

  ngOnInit(): void {
    // 组件初始化完成后，获取父容器内所有复选框
    this.checkboxes = this.checkAll.nativeElement.parentElement?.querySelectorAll('input[type="checkbox"]') as NodeListOf<HTMLInputElement>;
  }

  selectAll(isChecked: boolean): void {
    // 遍历所有子复选框，同步全选状态
    this.checkboxes?.forEach(checkbox => {
      checkbox.checked = isChecked;
    });
  }
}

HTML文件 #

<div>
  <input
    type="checkbox"
    id="selectall"
    class="mx-4"
    style="width: 20px; height: 20px; border-radius: 3px"
    #checkAll
    (change)="selectAll(checkAll.checked)"
  />
  <label for="selectall" id="select-all-checkbox" class="">Select all</label>

  <!-- 以下是示例子复选框，根据实际需求补充 -->
  <input type="checkbox" class="mx-4" />
  <input type="checkbox" class="mx-4" />
  <input type="checkbox" class="mx-4" />
</div>

关键修正说明 #

• 使用@ViewChild装饰器正确获取模板引用变量，确保在ngOnInit阶段能访问到DOM元素
• 将(change)事件绑定到复选框上，同时保证<label>的for属性与复选框id一致，实现点击标签切换复选框状态的效果
• 在ngOnInit中执行子复选框查询，避免DOM未加载完成导致的查询失败
• 修正遍历逻辑，通过forEach逐个设置子复选框的选中状态

内容的提问来源于stack exchange，提问作者Ariyo Joey