如何实现复选框的全选与取消全选功能？

步骤1：添加全选控制按钮 #

在复选框列表上方添加一个按钮，用于触发全选/取消全选操作：

<button onClick={handleSelectAll}>
  {isAllSelected ? '取消全选' : '全选'}
</button>

步骤2：判断当前全选状态 #

在组件中新增一个派生状态，用来判断所有复选框是否都处于选中状态：

const isAllSelected = post.fields?.every(field => {
  const key = `${post.label}_${field.name}`;
  return checkboxStates[key] === true;
}) || false;

步骤3：编写全选/取消全选处理函数 #

实现handleSelectAll函数，批量更新所有复选框的状态：

const handleSelectAll = () => {
  const newCheckboxStates = {...checkboxStates};
  post.fields?.forEach(field => {
    const key = `${post.label}_${field.name}`;
    // 根据当前全选状态反转所有复选框的选中状态
    newCheckboxStates[key] = !isAllSelected;
  });
  setCheckboxStates(newCheckboxStates);
};

整合后的完整代码片段 #

把上述逻辑整合到你的现有代码中，最终的复选框区域代码如下：

<div>
  <button onClick={handleSelectAll}>
    {isAllSelected ? '取消全选' : '全选'}
  </button>
  <div>
    {post.fields?.map((field: any, idx: number) => {
      const key = `${post.label}_${field.name}`;
      const isChecked = checkboxStates[key] || false;
      return (
        <div key={idx}>
          <input
            type="checkbox"
            checked={isChecked}
            onChange={(e) =>
              handleCheckboxChange(field, e.target.checked)
            }
          />
          <span>{field?.name}</span>
          <br />
        </div>
      );
    })}
  </div>
</div>

关键说明 #

• 通过every方法遍历所有字段对应的状态值，精准判断是否处于全选状态；
• 批量更新状态时，通过复制原状态对象再修改，避免直接修改状态引发的不可变问题；
• 按钮文字随全选状态自动切换，让操作逻辑更直观。

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