selectAllCheckboxes.js

import { useState } from "react";

const initialItems = [
  { id: 1, name: "React", checked: false },
  { id: 2, name: "Node", checked: false },
  { id: 3, name: "MongoDB", checked: false },
];

export default function SelectAllCheckboxes() {
  const [items, setItems] = useState(initialItems);

  const allSelected = items.every((item) => item.checked);

  const toggleAll = () => {
    setItems((prev) =>
      prev.map((item) => ({
        ...item,
        checked: !allSelected,
      }))
    );
  };

  const toggleItem = (id) => {
    setItems((prev) =>
      prev.map((item) =>
        item.id === id ? { ...item, checked: !item.checked } : item
      )
    );
  };

  return (
    <div>
      <label>
        <input type="checkbox" checked={allSelected} onChange={toggleAll} />
        Select All
      </label>

      {items.map((item) => (
        <div key={item.id}>
          <label>
            <input
              type="checkbox"
              checked={item.checked}
              onChange={() => toggleItem(item.id)}
            />
            {item.name}
          </label>
        </div>
      ))}
    </div>
  );
}