如何添加 'All' 复选框以便 select 所有其他选项？

Question

我如何添加 All 复选框，这将 select 每个 Type of plant 的所有其他复选框，并在每个 Type of plant 部分前面添加一个复选框。因此，当我 select 一个选项 Plant 1.1 时，我的 Type of plant #1 复选框被填充，如果选项被填充，则 Type of plant 的复选框未被填充。

export default function Category({
  _id_type,
  name_type,
  plants,
  changeSelection
}) {
  const [toggleState, setToggleState] = useState(false);

  return (
    <div key={_id_type}>
      <div
        style={{
          cursor: "pointer",
          userSelect: "none",
          display: "flex",
          margin: "2px",
          backgroundColor: "lightgray"
        }}
        onClick={() => setToggleState((prev) => !prev)}
      >
        <div>{name_type}</div>
        <div
          style={{
            backgroundColor: "blue",
            color: "white",
            padding: "0px 10px",
            marginLeft: "auto"
          }}
        >
          {plants.filter(({ selected }) => selected).length}
        </div>
      </div>
      <div style={{ marginLeft: "10px" }}>
        {toggleState &&
          plants.map(({ name, _id, selected }) => (
            <div key={_id}>
              <input
                key={_id}
                type="checkbox"
                value={name}
                checked={selected}
                onChange={(e) => changeSelection(_id_type, _id, e.target.value)}
              />
              {name}
            </div>
          ))}
      </div>
    </div>
  );
}

来一张图（我有的/我想要的）：

这是我的 code

Answer 1

在里面添加新工具 category.jsx

{toggleState && plants.length > 1 ? (
          <div>
            <input
              type="checkbox"
              value={"all"}
              checked={allSelected}
              onChange={(e) => {
                setAllSelected((v) => {
                  changeSelection(_id_type, "all", e.target.value, !v);
                  return !v;
                });
              }}
            />
            All
          </div>
        ) : (
          ""
        )}

编辑更改选择函数：

const changeSelection = (catId, itemId, value, allSelected) => {
    setSelectionMenu((prevSelectionMenu) =>
      prevSelectionMenu.map((item) => {
        if (item._id_type === catId) {
          return {
            ...item,
            plants: item.plants.map((plant) => {
              if (plant._id === itemId) {
                return { ...plant, selected: !plant.selected };
              } else if (itemId === "all") {
                return { ...plant, selected: allSelected };
              }
              return plant;
            })
          };
        }
        return item;
      })
    );
  };

这里是分叉代码： https://codesandbox.io/embed/plants-forked-qdmz2h?fontsize=14&hidenavigation=1&theme=dark

如何添加 'All' 复选框以便 select 所有其他选项？

How can I add the 'All' checkbox in order to select all the other options?

checkbox

reactjs