Angular中如何获取多个复选框的选中值

首先注意：你的原始代码中所有复选框的id都是check-4，这不符合HTML规范，每个元素的id必须唯一，否则label的for属性无法正确绑定到对应复选框，点击标签时会出现异常，需要先将id修改为唯一值（比如check-1、check-2、check-3），同时label的for属性对应修改。

下面提供两种Angular中常用的实现方式：

方式一：模板驱动表单（手动处理选中状态） #

组件类代码 #

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

@Component({
  selector: 'app-checkbox-demo',
  templateUrl: './checkbox-demo.component.html'
})
export class CheckboxDemoComponent {
  // 存储选中值的变量
  temp: number[] = [];

  // 处理复选框选中/取消事件
  onCheckboxChange(event: Event, value: number) {
    const checkbox = event.target as HTMLInputElement;
    if (checkbox.checked) {
      // 选中时添加值到数组
      this.temp.push(value);
    } else {
      // 取消选中时从数组移除对应值
      const index = this.temp.indexOf(value);
      if (index !== -1) {
        this.temp.splice(index, 1);
      }
    }
  }
}

模板HTML代码 #

<!-- 修正id和for属性，绑定change事件 -->
<input type="checkbox" id="check-1" name="checkbox" value="1" (change)="onCheckboxChange($event, 1)">
<label for="check-1"><span>1</span></label>

<input type="checkbox" id="check-2" name="checkbox" value="2" (change)="onCheckboxChange($event, 2)">
<label for="check-2"><span>2</span></label>

<input type="checkbox" id="check-3" name="checkbox" value="3" (change)="onCheckboxChange($event, 3)">
<label for="check-3"><span>3</span></label>

<!-- 可选：展示选中结果 -->
<p>当前选中值：{{ temp }}</p>

方式二：响应式表单（推荐，更符合Angular表单规范） #

第一步：导入响应式表单模块 #

在你的模块文件（比如app.module.ts）中导入ReactiveFormsModule：

import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { CheckboxDemoComponent } from './checkbox-demo/checkbox-demo.component';

@NgModule({
  declarations: [AppComponent, CheckboxDemoComponent],
  imports: [BrowserModule, ReactiveFormsModule], // 添加ReactiveFormsModule
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

组件类代码 #

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';

@Component({
  selector: 'app-checkbox-demo',
  templateUrl: './checkbox-demo.component.html'
})
export class CheckboxDemoComponent implements OnInit {
  checkboxForm: FormGroup;
  temp: number[] = [];

  constructor(private fb: FormBuilder) {
    // 初始化表单，用FormControl存储选中值数组
    this.checkboxForm = this.fb.group({
      checkboxes: this.fb.control([])
    });
  }

  ngOnInit(): void {
    // 监听表单值变化，自动同步到temp变量（将字符串值转为数字）
    this.checkboxForm.get('checkboxes')?.valueChanges.subscribe(selectedValues => {
      this.temp = selectedValues.map((val: string) => parseInt(val, 10));
    });
  }
}

模板HTML代码 #

<!-- 绑定表单组 -->
<form [formGroup]="checkboxForm">
  <input type="checkbox" id="check-1" name="checkboxes" value="1" formControlName="checkboxes">
  <label for="check-1"><span>1</span></label>

  <input type="checkbox" id="check-2" name="checkboxes" value="2" formControlName="checkboxes">
  <label for="check-2"><span>2</span></label>

  <input type="checkbox" id="check-3" name="checkboxes" value="3" formControlName="checkboxes">
  <label for="check-3"><span>3</span></label>
</form>

<!-- 可选：展示选中结果 -->
<p>当前选中值：{{ temp }}</p>

两种方式都能实现需求：当选中1和2时，temp变量会变成[1,2]。响应式表单方式更易于维护复杂表单逻辑，推荐使用。

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