Выбор всех невыбранных checkbox в jQuery: решение ошибки

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

Для поиска всех невыбранных чекбоксов в jQuery служат селекторы :not(:checked) и :checkbox:

var unchecked = $(':checkbox:not(:checked)');

Теперь переменная unchecked ссылается на все невыбранные чекбоксы.

Подробный разбор: выбор и не только

После ознакомления с основным способом, давайте изучим подробнее возможности управления чекбоксами и раскроем их скрытый потенциал.

Извлечение значений невыбранных чекбоксов

Для получения значений невыбранных чекбоксов подойдёт функция .map(). Пример её применения с нашим селектором:

var uncheckedValues = $(':checkbox:not(:checked)').map(function() {
  return this.value; // Здесь 'this' ссылается на текущий элемент массива
}).get();

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

Проверка состояния внутри функции

Если вам требуется проверить состояние чекбокса внутри функции или обработчика событий, обратитесь к данному примеру:

if (!$(this).is(':checked')) {
  // Вы обнаружили невыбранный чекбокс. Получите виртуальное печенье 🍪
}

Метод "без jQuery" с использованием чистого JavaScript

Для тех, кто отдает предпочтение чистому JavaScript перед jQuery:

var unchecked = document.querySelectorAll('input[type="checkbox"]:not(:checked)');

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

Допустим, у нас есть такие чекбоксы: [✅, ✅, ❌, ✅, ❌]

Запускаем запрос:

$('input:checkbox:not(:checked)') // Поиск, аналогичный Глазу Саурона 🔎

И получаем следующий результат:

Невыбранные: [❌, ❌] // Акцентируем внимание на выбранных элементах 🎯

Дополнительные уловки

Переходим к продвинутым методам и трюкам для работы с чекбоксами в jQuery.

Улучшение читаемости c помощью пользовательских селекторов

Чтобы упростить чтение кода, можно расширить функционал jQuery, добавив селектор :unchecked:

$.extend($.expr[':'], {
  unchecked: function(obj) {
    return !$(obj).is(':checked'); // "unchecked" теперь доступен вам
  }
});

Теперь селектор $('input:unchecked') можно использовать.

Уточняем выбор внутри форм и областей

Если вам приходится работать с несколькими формами или наборами чекбоксов, можно сделать более точный поиск:

$('#myForm :checkbox:not(:checked)'); // Где 'myForm' – это ваш уникальный идентификатор формы

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

На динамических веб-страницах чекбоксы могут менять свое состояние. Чтобы контролировать их, используйте делегирование событий с помощью метода .on():

$(document).on('change', ':checkbox', function() {
  var unchecked = $(':checkbox:not(:checked)').length;
  // Показываете результат или выполняете нужное действие
});

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

1. Селекторы | Официальная документация jQuery API – Подробный гид по селекторам jQuery, который поможет вам ориентироваться в DOM.
2. :checked – CSS: Каскадные стили – Углубленное понимание работы с псевдоклассом :checked в CSS3.
3. Как отобразить текст, когда чекбокс выбран – Практическое руководство по отображению текста при переключении чекбоксов.
4. Часто задаваемые вопросы | Учебный центр jQuery – Обзор типичных вопросов и ответов для решения распространенных задач при использовании jQuery.
5. Селекторы jQuery – Исчерпывающий справочник по селекторам jQuery, который облегчит вам выбор элементов.