Сбор выбранных чекбоксов в массив JavaScript и jQuery

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

Для сбора значений выбранных чекбоксов в массив вы можете использовать метод querySelectorAll:

const selected = [...document.querySelectorAll('input[type=checkbox]:checked')].map(checkbox => checkbox.value);

Распространенные подходы и решения для разнообразных сценариев

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

Упрощение задачи с использованием jQuery

Если в вашем проекте применяется jQuery, то следующий синтаксис упростит решение задачи:

let selected = $('input[type=checkbox]:checked').map(function() { return this.value; }).get();
// Работать с jQuery – сплошное удовольствие: всё кристально ясно и просто.

Этот код позволяет без труда отбирать элементы DOM, перебирать их и преобразовывать в массив.

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

Работа с формами и чекбоксами

В контексте форм сериализация массива становится явно полезной, особенно когда данные отправляются на сервер:

const formData = $('form').serializeArray();
// Теперь с формами вы не столкнетесь ни с какими проблемами! Сериализация – на удивление проста.

Выбор чекбоксов по имени

В определённых случаях может возникнуть потребность выбрать чекбоксы по определённому имени:

const namedCheckboxes = $(`input[type=checkbox][name="myCheckbox"]:checked`).map((_, checkbox) => checkbox.value).get();
// Это выражение представляет собой снайперскую винтовку – с его помощью вы попадете в нужные вам чекбоксы точно-точно!

Используя уточненные селекторы, вы увеличиваете точность и надежность запросов.

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

Представьте, что чекбоксы – эти лихие помидоры 🍅, которые превращаются в сладкие клубники 🍓, как только их отмечают:

Поле Помидор-Клубника: 🌳
     [ ] 🍅    [x] 🍓    [ ] 🍅    [x] 🍓
     [x] 🍓    [ ] 🍅    [x] 🍓    [ ] 🍅

Наша цель – собрать только зрелые клубники 🍓!

Корзина с клубниками: 🧺
     [🍓, 🍓, 🍓]

Видите? В Корзине с клубниками 🧺 оказались только спелые плоды!

Продвинутые методы использования и дополнительные сценарии

Полезно углубиться и обсудить ключевые аспекты и сценарии, которые позволят расширить ваши навыки и знания в программировании.

Борьба с бесконечной загрузкой при помощи jQuery

Одно из важнейших правил jQuery: всегда дожидаться окончания загрузки DOM:

$(document).ready(function() {
    // Теперь, когда DOM загружен, мы можем начать работу с нашими чекбоксами!
});

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

Работа с динамически добавленными чекбоксами

Если DOM обновляется динамически (как в SPA или при использовании Ajax), актуально применять делегирование событий:

$(document).on('change', 'input[type=checkbox]', function() {
    // Мы применяем возможности динамически изменяющегося DOM на полную мощь!
});

Подходы с применением ванильного JavaScript

Несмотря на почётную популярность jQuery, иногда ванильный JavaScript может быть более предпочтителен:

document.addEventListener('DOMContentLoaded', function() {
    // Так же, как рок-звезда с нетерпением ждет встречи со своими поклонниками, ванильный JavaScript ожидает, когда DOM будет готов!
});

jQuery не всегда является необходимостью – ванильный JavaScript с конкретными селекторами может стать вашим надежным помощником в работе с DOM!

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

1. Document: querySelectorAll() method – Web APIs | MDN — Непререкаемое лидерство по запросам к DOM на MDN.
2. html – How to convert a DOM node list to an array in Javascript? – Stack Overflow — Мастерство преобразования NodeList в массив, подробно разъяснённое сообществом.
3. NodeList – Web APIs | MDN — Погрузитесь в изучение NodeList и поразите глубину, находя скрытые сокровища.
4. Element: classList property – Web APIs | MDN — Изучите classList и его способности к управлению классами.
5. The "Checkbox Hack" (and things you can do with it) | CSS-Tricks – CSS-Tricks — Представьте, что чекбоксы — это не просто элементы форм, но и мир невиданных возможностей CSS и JS.
6. javascript – What is DOM Event delegation? – Stack Overflow — Узнайте всё о Делегировании событий и о его преимуществах при обработке событий.
7. Методы массива — Массивы обладают широкими возможностями! Ознакомьтесь с множеством методов массива и выучите их наизусть.