React移动端中实现全选和不选的实现

React移动端中实现全选和不选的实现

React移动端中实现点击全选，数据全部选择，数据有一个不选择，全选就不选

下面是一种实现方式，其中的 data 表示要选择的数据列表，每个数据对象中有一个 checked 属性，表示该数据是否被选中。当点击全选按钮时，会将所有数据的 checked 属性设为 true，当数据有一个未被选中时，全选按钮也会被设为未选中状态。

import { useState } from "react";

function App() {
  const [data, setData] = useState([
    { id: 1, name: "John Doe", checked: false },
    { id: 2, name: "Jane Smith", checked: false },
    { id: 3, name: "Bob Johnson", checked: false },
  ]);

  const handleToggleAll = () => {
    const allChecked = data.every((item) => item.checked);
    setData((prevData) =>
      prevData.map((item) => ({ ...item, checked: !allChecked }))
    );
  };

  const handleToggleItem = (id) => {
    setData((prevData) =>
      prevData.map((item) =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  };

  return (
    <div>
      <div>
        <label>
          <input
            type="checkbox"
            checked={data.every((item) => item.checked)}
            onChange={handleToggleAll}
          />
          全选
        </label>
      </div>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            <label>
              <input
                type="checkbox"
                checked={item.checked}
                onChange={() => handleToggleItem(item.id)}
              />
              {item.name}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}
export default App

效果：