Angular 4中点击复选框时如何选中所有前置复选框？

你想要的是复选框的递进式联动效果：点击某一个复选框时，自动选中它之前的所有复选框，当前复选框保持选中，而它之后的复选框则恢复未选中状态。结合你提供的Angular代码，我来帮你调整实现这个功能：

第一步：在组件类中维护选中状态数组 #

首先我们需要一个数组来跟踪每个复选框的选中状态，替代模板里硬编码的初始值。在你的组件.ts文件里添加以下代码：

// 存储每个复选框的选中状态，和模板里的循环长度保持一致
checkboxStates: boolean[] = [];

ngOnInit() {
  // 初始化状态：第一个复选框默认选中，其余默认未选中
  const totalCount = 4; // 和你模板里的[1,2,3,4]长度对应
  this.checkboxStates = Array(totalCount).fill(false);
  this.checkboxStates[0] = true;
}

第二步：修改模板的复选框绑定 #

把模板里的[checked]绑定到我们维护的状态数组，同时调整事件传递的参数：

<div class="cb-cont" *ngFor="let circle of [1,2,3,4], let i = index;">
  <input 
    type="checkbox" 
    class="cb" 
    [attr.id]="'vacancy' + i" 
    (change)="changeCheckbox(i)" 
    [checked]="checkboxStates[i]"
  >
  <label [attr.for]="'vacancy' + i">
    <i class="xico-completed"></i>
  </label>
</div>

第三步：实现联动逻辑的方法 #

修改你的changeCheckbox方法，处理点击后的状态更新：

changeCheckbox(index: number) {
  // 1. 确保当前点击的复选框处于选中状态
  this.checkboxStates[index] = true;
  
  // 2. 将当前复选框之前的所有项设为选中
  for (let i = 0; i < index; i++) {
    this.checkboxStates[i] = true;
  }
  
  // 3. 将当前复选框之后的所有项设为未选中
  for (let i = index + 1; i < this.checkboxStates.length; i++) {
    this.checkboxStates[i] = false;
  }
}

额外优化：添加层级标签（可选） #

如果需要给复选框加上Beginner/Intermediate这类标签，可以把循环数组改成对象数组，让逻辑更清晰：

// 替换原来的循环数组，用带标签的对象数组
skillLevels = [
  { label: 'Beginner', checked: true },
  { label: 'Intermediate', checked: false },
  { label: 'Advanced', checked: false },
  { label: 'Expert', checked: false }
];

// 修改联动方法
changeCheckbox(index: number) {
  this.skillLevels.forEach((level, i) => {
    level.checked = i <= index;
  });
}

对应的模板也可以更新为：

<div class="cb-cont" *ngFor="let level of skillLevels; let i = index;">
  <input 
    type="checkbox" 
    class="cb" 
    [attr.id]="'vacancy' + i" 
    (change)="changeCheckbox(i)" 
    [checked]="level.checked"
  >
  <label [attr.for]="'vacancy' + i">
    <i class="xico-completed"></i>
    {{ level.label }}
  </label>
</div>

这样点击Advanced时，Beginner和Intermediate会自动选中，Expert保持未选中，完全符合你的需求。

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