ant react 官网全选搞得一堆人不会用，超级简答的操作，一目了然

import React, { useState } from "react";
import "./index.css";
import { Checkbox, Divider } from "antd";
import type { CheckboxChangeEvent } from "antd/es/checkbox";
import type { CheckboxValueType } from "antd/es/checkbox/Group";

const CheckboxGroup = Checkbox.Group;

//todo  数据库获取的动态值 切记切记，一万个切记这个是字符串数组或者数字数组
const plainOptions = ["选择1", "选择2"];

const App: React.FC = () => {
  //声明数组和设置数组的方法
  const [checkedList, setCheckedList] = useState<CheckboxValueType[]>([]);

  //点击group单选的时候设置选中的值放在数组中
  //这个非常重要
  const onChange = (list: CheckboxValueType[]) => {
    setCheckedList(list);
  };

  //点击全选的时候设置选中的值
  const onCheckAllChange = (e: CheckboxChangeEvent) => {
    setCheckedList(e.target.checked ? plainOptions : []);
  };

  return (
    <>
      <Divider />
      <CheckboxGroup
        options={plainOptions}
        value={checkedList}
        onChange={onChange}
      />
      <Checkbox
        onChange={onCheckAllChange}
        // 这个是设置全选之后的全选这个也渲染出样式，这里加一个判断结果大于2才渲染出全选不然就是单选
        checked={checkedList.length == plainOptions.length}
      >
        全选
      </Checkbox>
    </>
  );
};

export default App;