Создание 'Выбрать все' чекбокса на HTML-странице через JS

Быстрый ответ

Для того, чтобы добавить функционал чекбокса "Выбрать все", вам потребуется создать главный чекбокс и привязать к нему JavaScript-скрипт. Этот скрипт будет переключать все чекбоксы:

<input type="checkbox" id="selectAll" onclick="document.querySelectorAll('.item').forEach(checkbox => checkbox.checked = this.checked)">
<input type="checkbox" class="item">
<input type="checkbox" class="item">
<input type="checkbox" class="item">

Благодаря представленному коду главный чекбокс, обозначенный как selectAll, будет обеспечивать контроль отметок всех остальных чекбоксов.

JavaScript: Динамический и надёжный способ "выбрать все"

Сделаем улучшенную версию нашего решения для динамически изменяемого содержимого, когда чекбоксы могут быть добавлены или удаляться:

// Создадим функцию для переключения чекбоксов
function toggleCheckboxes(isChecked) {
  const items = document.querySelectorAll('.item:not(#selectAll)');
  items.forEach(checkbox => checkbox.checked = isChecked);
}

// Привяжем событие click к элементу 'selectAll'
document.getElementById('selectAll').onclick = function() {
  toggleCheckboxes(this.checked);
};

• Чтобы чекбокс "Выбрать все" не влиял на себя, следует использовать селектор :not(#selectAll).
• Не беспокойтесь о совместимости с браузерами! Этот код работает даже в Internet Explorer 9, что покрывает потребности большинства пользователей.

Использование jQuery: Ещё более элегантный подход

Если вы предпочитаете jQuery, вот ещё более простое решение на его основе:

// Клик по 'selectAll' вызовет следующую функцию
$('#selectAll').click(function() {
  $('.item').prop('checked', this.checked);
});

• Использование свойств в jQuery так же просто, как намазать масло на хлеб. Просто используйте .prop()!
• Использование классов для обозначения чекбоксов избавляет от необходимости применять селектор ":checkbox". Удобно, не правда ли?
• Метод .click() упрощает обработку событий!

Визуализация

Представьте, что каждый чекбокс – это птица:

Птицы на проводах: [🐦] [🐦] [🐦] [🐦]

Чекбокс Выбрать Все – это сеть, которая может захвать все птицы за одну операцию:

Запускаем сеть: 🥅

Когда вы активируете функцию, все птицы попадают в сеть:

Все птицы пойманы: [🥅🐦🐦🐦🐦]

Суть проста: чекбокс Выбрать Все контролирует все остальные чекбоксы!

Работаем над удобством использования и управлением состояний чекбоксов

Обрабатываем состояния частью выбранных элементов

В тех случаях, когда выбраны только некоторые элементы, применение неопределённого состояния для чекбокса "Выбрать все" обеспечивает более корректную визуализацию:

// Сначала получаем чекбоксы 'item' и 'selectAll'
const items = document.querySelectorAll('.item'); 
const selectAll = document.getElementById('selectAll');

// Затем обновляем состояние 'selectAll'
function updateSelectAll() {
  const allChecked = [...items].every(item => item.checked);
  const someChecked = [...items].some(item => !item.checked);
  
  selectAll.checked = allChecked;
  selectAll.indeterminate = someChecked && !allChecked;
}

// После чего отслеживаем изменение состояния чекбоксов 'item'
items.forEach(item => {
  item.addEventListener('change', () => {
    updateSelectAll();
  });
});

Подробнее об этом расскажет наш спикер на видео

Улучшение пользовательского опыта

Несколько советов для интуитивно понятного использования функции "Выбрать всё":

• Стилизация: Настраивайте внешний вид неопределённого чекбокса с помощью CSS, чтобы он был более заметным.
• Мгновенная обратная связь: Обновлять состояние чекбокса "Выбрать все" без заметных задержек.
• Доступность: Гарантируйте комфортное использование без ограничений для людей с особыми потребностями. Для этого используйте навигацию с помощью клавиатуры, метки и ARIA-атрибуты.

Оптимизируем производительность

При работе с множественными чекбоксами производительность играет важную роль:

• Минимизируйте запросы к DOM: Сохраняйте ссылки на элементы чекбоксов, чтобы уменьшить количество обращений к DOM-дереву.
• Делегируйте события: Используйте принцип всплытия событий, чтобы уменьшить количество обработчиков.
• Группируйте изменения: Вместе выполняйте серии изменений для избегания "зависания" при перерисовке страницы браузером.

Полезные материалы

1. <input>: Элемент ввода (Form Input) – HTML: HyperText Markup Language | MDN — полное руководство по элементу <input>.
2. Как создать пользовательский чекбокс и радиокнопку — обучающий материал по созданию уникальных стилей для чекбоксов и радиокнопок.
3. События: изменение, ввод, вырезание, копирование, вставка — детальное руководство по событиям ввода в JavaScript.
4. Неопределенные чекбоксы | CSS-Tricks – CSS-Tricks — всё, что вы хотели знать о неопределенных чекбоксах.
5. Document: метод querySelectorAll() – Веб-API | MDN — все подробности о методе querySelectorAll().
6. Как создать переключатель — пошаговое руководство по созданию стильного переключателя.
7. .on() | Документация по jQuery API — возможности обработки событий с помощью метода .on() в jQuery.