React.js Ant Design中如何实现Checkbox全选功能？

问题说明 #

需要实现Ant Design Checkbox的全选功能：勾选全选框时选中对应section下所有权限，取消全选时清空该section下所有选中的权限，同时保证单个权限的选中状态与全选框状态同步。

1. 修正Checkbox组件代码 #

主要调整单个Checkbox的选中状态判断，以及全选框的状态同步逻辑：

<div style={{ marginTop: 33 }}>
  {Object.keys(permissionList).map((sectionKey, index) => {
    const sectionPermissions = permissionList[sectionKey];
    const sectionName = sectionPermissions[0]?.section.toLowerCase();
    // 判断当前section是否已全选
    const isSectionChecked = sectionPermissions.every(item => 
      formData.permissions.some(per => per.permissionId === item.permissionId)
    );

    return (
      <Collapsible
        title={sectionPermissions[0]?.section}
        isFirst={index === 0}
        key={sectionKey}
      >
        {sectionPermissions?.map((item, itemIndex) => (
          <Checkbox.Group
            options={[
              {
                label: item.name.toLowerCase(),
                value: item.name.toLowerCase(),
              },
            ]}
            disabled={isViewItem}
            className="checkbox-style"
            key={itemIndex}
            // 修正单个Checkbox的选中状态：仅判断当前权限是否在已选列表中
            value={formData.permissions.some(per => per.permissionId === item.permissionId) 
              ? [item.name.toLowerCase()] 
              : []}
            onChange={checkedValues =>
              handleCheckboxChange(
                item.permissionId,
                item.section.toLowerCase(),
                checkedValues
              )
            }
          />
        ))}
        <Checkbox.Group
          options={[
            {
              label: "check all",
              value: sectionPermissions[0]?.section,
            },
          ]}
          disabled={isViewItem}
          className="checkbox-style"
          key={`all-${index}`}
          // 同步全选框状态：根据section下所有权限的选中情况自动更新
          value={isSectionChecked ? [sectionPermissions[0]?.section] : []}
          onChange={checkedValues =>
            handleCheckAll(sectionPermissions, checkedValues)
          }
        />
      </Collapsible>
    );
  })}
</div>

2. 完善handleCheckAll函数 #

实现全选/取消全选的核心逻辑：

const handleCheckAll = (permissionsData: Permission[], checkedValues: CheckboxValueType[]) => {
  setFormData(prevFormData => {
    const updatedFormData = { ...prevFormData, permissions: [...prevFormData.permissions] };
    const sectionName = permissionsData[0].section.toLowerCase();

    if (checkedValues.length > 0) {
      // 勾选全选：添加当前section下所有未选中的权限
      permissionsData.forEach(item => {
        const exists = updatedFormData.permissions.some(per => per.permissionId === item.permissionId);
        if (!exists) {
          updatedFormData.permissions.push({
            permissionId: item.permissionId,
            section: sectionName,
            name: item.name.toLowerCase()
          });
        }
      });
    } else {
      // 取消全选：移除当前section下所有权限
      updatedFormData.permissions = updatedFormData.permissions.filter(
        per => per.section.toLowerCase() !== sectionName
      );
    }

    return updatedFormData;
  });
};

3. 关键修改点说明 #

• 单个Checkbox状态修正：原来的value逻辑错误地使用了整个section的权限列表，导致同一section下的所有Checkbox状态完全一致，现在改为仅判断当前权限是否在已选列表中。
• 全选框状态同步：通过isSectionChecked变量判断当前section下所有权限是否都被选中，自动同步全选框的选中状态。
• 全选逻辑优化：勾选全选时仅添加未选中的权限（避免重复），取消全选时直接过滤掉整个section的所有权限，保证数据一致性。

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