Angular中如何实现复选框互斥选择：选中一个时自动取消另一个复选框

嘿，这个需求我碰到过好几次啦——本质就是把两个复选框改成互斥的单选行为对吧？我给你拆解一下通用逻辑，再讲讲Angular里的具体实现方式：

核心其实就是维护一个单一的状态变量来控制两个复选框的选中状态，确保它们始终互斥：

• 定义一个状态变量，用来记录当前选中的选项（比如用字符串、布尔值或者枚举类型）
• 给每个复选框绑定选中状态判断：只有当状态变量匹配当前选项时，复选框才处于选中状态
• 监听复选框的change事件：当选中某个复选框时，将状态变量设置为当前选项；如果取消选中，就把状态变量置空（或者根据需求决定是否强制选中另一个）
• 关键原则：两个复选框的状态始终由同一个变量驱动，绝对不会出现同时为true的情况

Angular里常用两种表单方式，我分别给你写实用示例：

方式一：模板驱动表单（适合简单场景） #

先在组件类里定义状态变量：

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

@Component({
  selector: 'app-checkbox-single-select',
  templateUrl: './checkbox-single-select.component.html',
})
export class CheckboxSingleSelectComponent {
  // 用字符串标识选中的选项，null表示都不选
  selectedOption: 'option1' | 'option2' | null = null;
}

然后在模板里绑定复选框的状态和事件：

<div>
  <label>
    <input 
      type="checkbox" 
      [checked]="selectedOption === 'option1'"
      (change)="selectedOption = $event.target.checked ? 'option1' : null"
    >
    选项1
  </label>
  <label>
    <input 
      type="checkbox" 
      [checked]="selectedOption === 'option2'"
      (change)="selectedOption = $event.target.checked ? 'option2' : null"
    >
    选项2
  </label>
</div>

操作的时候，选中选项1会自动取消选项2的选中状态，反之亦然；取消当前选中的话，两个都会变成未选中状态。

方式二：响应式表单（适合复杂表单场景） #

如果你的页面用了Angular响应式表单，可以这么实现：
首先在组件类里创建表单控件：

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

@Component({
  selector: 'app-checkbox-single-select',
  templateUrl: './checkbox-single-select.component.html',
})
export class CheckboxSingleSelectComponent {
  // 用FormControl管理选中状态
  singleSelectControl = new FormControl<string | null>(null);

  handleCheckboxChange(option: string) {
    const currentValue = this.singleSelectControl.value;
    if (currentValue === option) {
      // 如果当前已经选中这个选项，取消的话置空
      this.singleSelectControl.setValue(null);
    } else {
      // 选中当前选项，自动取消另一个
      this.singleSelectControl.setValue(option);
    }
  }
}

模板里绑定表单控件和事件：

<div>
  <label>
    <input 
      type="checkbox" 
      [formControl]="singleSelectControl"
      [value]="'option1'"
      (change)="handleCheckboxChange('option1')"
    >
    选项1
  </label>
  <label>
    <input 
      type="checkbox" 
      [formControl]="singleSelectControl"
      [value]="'option2'"
      (change)="handleCheckboxChange('option2')"
    >
    选项2
  </label>
</div>

如果你的UI允许的话，原生radio按钮其实是更合适的选择——它天生就支持互斥单选，不需要自己写额外逻辑。但如果因为设计需求必须用复选框，上面的两种方案就完全能满足你的需求啦。

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