Как реализовать чекбокс «Выбрать все» для списка?

Паттерн «Выбрать все» — классическая задача управления состоянием списка. Ключевая идея: не хранить отдельный флаг «всё выбрано», а выводить его из массива выбранных идентификаторов. Это исключает рассинхронизацию между родительским и дочерними чекбоксами.

Основные состояния

• Все выбраны — родительский чекбокс отмечен.
• Никто не выбран — родительский чекбокс пуст.
• Часть выбрана — родительский чекбокс в состоянии indeterminate (промежуточное, задаётся только через JS-свойство).

Пример на React

function SelectAllList({ items }) {
  const [selected, setSelected] = React.useState([]);
  const allIds = items.map(i => i.id);
  const allChecked = selected.length === items.length && items.length > 0;
  const someChecked = selected.length > 0 && !allChecked;

  const toggleAll = () => setSelected(allChecked ? [] : allIds);
  const toggleOne = (id) => setSelected(prev =>
    prev.includes(id) ? prev.filter(x => x !== id) : [...prev, id]);

  return (
    <div>
      <label>
        <input type="checkbox" checked={allChecked}
          ref={el => el && (el.indeterminate = someChecked)}
          onChange={toggleAll} /> Выбрать все
      </label>
      {items.map(i => (
        <label key={i.id}>
          <input type="checkbox" checked={selected.includes(i.id)}
            onChange={() => toggleOne(i.id)} /> {i.name}
        </label>
      ))}
    </div>
  );
}

Важные детали

• Свойство indeterminate нельзя задать через HTML-атрибут — только через DOM-свойство или ref.
• Для больших списков храните выбранные id в Set — проверка has работает за O(1).
• Если список приходит с сервера постранично, «выбрать все» часто означает «выбрать все на странице», а не глобально.

Итог: применяйте этот паттерн везде, где есть массовые операции над списком — корзина, таблица с фильтрами, управление правами. Вывод состояния из массива id делает логику предсказуемой и легко тестируемой.