复选框全选功能异常：取消单个选项后全选框未取消选中

嘿，我看你遇到了全选复选框和单个工作日复选框不同步的问题——当取消单个选项时，全选框还保持选中状态对吧？这是因为你的状态绑定和逻辑处理有点小问题，我来帮你修正它！

先看看现有代码的核心问题：

• 所有工作日复选框都绑定了同一个checkAllWeek变量，这意味着它们的状态会完全同步，而不是各自独立的。
• 当取消单个工作日时，你只是把checkAll设为false，但没有正确判断所有工作日是否都还处于选中状态，来动态更新全选框的状态。
• 全选逻辑里，直接设置checkAllWeek = true，但没有真正同步每个工作日的选中状态。

我们需要给每个工作日单独维护选中状态，然后通过逻辑判断来同步全选框的状态。

第一步：修改组件的状态定义 #

把原来的checkAllWeek替换为一个对象，用来存储每个工作日的选中状态：

// 组件类里的状态定义
checkAll = false;
// 每个工作日独立维护选中状态
weekdays = {
  Monday: false,
  Tuesday: false,
  Wednesday: false,
  Thursday: false,
  Friday: false,
  Saturday: false,
  Sunday: false
};

第二步：更新HTML模板 #

把每个工作日复选框的[checked]绑定到对应的weekdays属性，同时修改change事件的参数，传递工作日的键名（另外我把所有复选框的id改成了唯一值，避免重复id导致的DOM问题）：

<div class="row ">
  <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0 warning">
    <input type="checkbox" id="rem-all" class="custom-control-input" [checked]="checkAll" (change)="onChangeCheckAll($event.target.checked)">
    <span class="custom-control-indicator"></span>
    <span class="custom-control-description"></span> Select All
  </label>
</div>
<div class="row mgtop-5">
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-mon" class="custom-control-input" [checked]="weekdays.Monday" (change)="onChangeCheckWeek('Monday', $event.target.checked)">
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Monday
    </label>
  </div>
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-tue" class="custom-control-input" [checked]="weekdays.Tuesday" (change)="onChangeCheckWeek('Tuesday', $event.target.checked)" >
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Tuesday
    </label>
  </div>
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-wed" class="custom-control-input" [checked]="weekdays.Wednesday" (change)="onChangeCheckWeek('Wednesday', $event.target.checked)" >
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Wednesday
    </label>
  </div>
</div>
<div class="row mgtop-5">
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-thu" class="custom-control-input" [checked]="weekdays.Thursday" (change)="onChangeCheckWeek('Thursday', $event.target.checked)" >
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Thursday
    </label>
  </div>
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-fri" class="custom-control-input" [checked]="weekdays.Friday" (change)="onChangeCheckWeek('Friday', $event.target.checked)" >
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Friday
    </label>
  </div>
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-sat" class="custom-control-input" [checked]="weekdays.Saturday" (change)="onChangeCheckWeek('Saturday', $event.target.checked)" >
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Saturday
    </label>
  </div>
</div>
<div class="row mgtop-5">
  <div class="col-sm-4 ">
    <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0">
      <input type="checkbox" id="rem-sun" class="custom-control-input" [checked]="weekdays.Sunday" (change)="onChangeCheckWeek('Sunday' , $event.target.checked)" >
      <span class="custom-control-indicator"></span>
      <span class="custom-control-description"></span> Sunday
    </label>
  </div>
  <div class="col-sm-8 mgtop-5"></div>
</div>

第三步：修正逻辑方法 #

更新两个事件处理方法，实现双向同步：

// 单个工作日复选框的变化事件
onChangeCheckWeek(day: string, isChecked: boolean) {
  // 更新对应工作日的状态
  this.weekdays[day] = isChecked;
  // 检查所有工作日是否都被选中，自动更新全选框的状态
  this.checkAll = Object.values(this.weekdays).every(checked => checked);
}

// 全选复选框的变化事件
onChangeCheckAll(isChecked: boolean) {
  // 更新全选状态
  this.checkAll = isChecked;
  // 把所有工作日的状态同步为全选的状态
  Object.keys(this.weekdays).forEach(day => {
    this.weekdays[day] = isChecked;
  });
}

• 现在每个工作日有独立的选中状态，不再共用一个变量，解决了状态同步错误的问题。
• 当单个工作日状态变化时，通过every方法检查所有工作日是否都选中，自动更新全选框的状态。
• 全选时，遍历所有工作日，把它们的状态统一设置为全选的状态，实现真正的全选/取消全选。

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