Angular双复选框互斥且支持全不选的简洁实现方案求教

优化方案1：适配现有写法的最简实现 #

核心逻辑：点击某复选框后，仅当该复选框变为选中状态时，清空另一个复选框的选中状态即可，完全覆盖「最多选1个、可全不选」的需求。

HTML 代码 #

<input type="checkbox" id="cb1" name="cb1" (click)="handleCheck('cb1')" [(ngModel)]="cb1">
<input type="checkbox" id="cb2" name="cb2" (click)="handleCheck('cb2')" [(ngModel)]="cb2">

TS 代码 #

cb1 = false;
cb2 = false;

// 初始化默认值示例，假设控制默认值的字段为defaultCheck
initDefault(defaultCheck: string) {
  this.cb1 = defaultCheck === 'cb1';
  this.cb2 = defaultCheck === 'cb2';
}

public handleCheck(checkedKey: 'cb1' | 'cb2') {
  // 仅当前点击的复选框被选中时，清空另一个的选中状态
  if (this[checkedKey]) {
    this[checkedKey === 'cb1' ? 'cb2' : 'cb1'] = false;
  }
}

和原有实现相比，删除了所有冗余的反向判断，逻辑清晰易懂，代码量减少60%以上。

优化方案2：易扩展的通用实现 #

如果后续可能新增更多互斥复选框，推荐用数组管理选中项，不用单独定义每个复选框的变量：

HTML 代码 #

<!-- 可直接循环扩展，不用重复写input标签 -->
<input type="checkbox" id="cb1" name="cb1" (click)="handleCheck('cb1')" [checked]="selected.includes('cb1')">
<input type="checkbox" id="cb2" name="cb2" (click)="handleCheck('cb2')" [checked]="selected.includes('cb2')">

TS 代码 #

// 数组存储选中项，天然保证最多1个选中值
selected: string[] = [];

// 初始化默认值示例
initDefault(defaultCheck: string) {
  this.selected = defaultCheck ? [defaultCheck] : [];
}

public handleCheck(option: string) {
  const index = this.selected.indexOf(option);
  if (index > -1) {
    // 已选中则取消
    this.selected.splice(index, 1);
  } else {
    // 未选中则清空原有选中项，仅保留当前点击的选项
    this.selected = [option];
  }
}

该方案支持任意数量的互斥复选框需求，后续新增选项只需要加一行input标签即可，无需修改逻辑代码。

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