JavaScript复选框全选/取消全选状态翻转异常修复

现有代码的核心错误是用cb.click()逐行触发复选框点击，这个操作的逻辑是翻转每一行复选框的当前选中状态，根本不是按全选框的目标值统一设置状态。
举个实际场景：第一次全选后你手动取消了3行，此时3行未选中、其余行选中，再次点全选框触发逻辑时，click()会把所有行的状态挨个翻转——原本选中的行变成未选中，之前手动取消的3行反而被选中，完全和全选框要设置的目标状态相反。
另外你从className里用正则提取id的逻辑也有隐患，只要后续给复选框加了其他带数字的类名，就会取错关联的行id，建议渲染复选框时加data-id属性存对应行id，不要从class字符串里抠值。

不要用模拟点击的方式改状态，直接给每个复选框的checked属性赋值为全选框的目标状态，同步收集选中项即可。
首先确保渲染单行复选框时绑定了行id：

// 单行复选框渲染示例
<input 
  type="checkbox" 
  className="liquidationSpreadCb" 
  data-id={item.id} // 存当前行对应的数据id
/>

修复后的全选逻辑：

const selectAll = event => {
  const targetChecked = event.target.checked;
  const cbs: NodeListOf<HTMLInputElement> = document.querySelectorAll('.liquidationSpreadCb');
  const selectedItems: ILiquidationSpread[] = [];

  cbs.forEach((cb: HTMLInputElement) => {
    // 直接对齐全选框的状态，不做翻转
    cb.checked = targetChecked;
    if (targetChecked) {
      const itemId = Number(cb.dataset.id);
      const targetItem = liquidationSpreadList.find(val => val.id === itemId);
      targetItem && selectedItems.push(targetItem);
    }
  });

  setSelectedItems(targetChecked ? selectedItems : []);
};

• 如果是用React/Vue这类数据驱动的框架开发，不建议直接操作DOM修改复选框状态，最好维护一份行选中状态的数组，全选触发时直接把所有行的选中标记设为和全选框一致，由框架自动更新视图，能彻底避免DOM操作和内部状态不同步的问题。
• 不要从className中提取业务关联的id值，使用标准的data-*自定义属性存储DOM关联的业务数据，不会受类名增删改动的影响，稳定性更高。

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