Работа с чекбоксами и радиокнопками

Umbrella JS предоставляет компактный и удобный способ работы с элементами формы, включая чекбоксы (<input type="checkbox">) и радиокнопки (<input type="radio">). Основные операции включают выбор элементов, получение их состояния, изменение состояния и обработку событий.

Выбор элементов

Для работы с чекбоксами и радиокнопками используется стандартный селектор CSS. Umbrella JS позволяет сразу выбрать набор элементов и работать с ними как с коллекцией.

// Выбор всех чекбоксов на странице
u('input[type="checkbox"]');

// Выбор радиокнопок по имени группы
u('input[name="gender"]');

Методы Umbrella JS применяются ко всем выбранным элементам коллекции сразу, что упрощает массовые изменения состояния или добавление обработчиков.

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

Чтобы узнать, отмечен ли чекбокс или радиокнопка, используется метод .prop():

// Проверка состояния первого чекбокса
let isChecked = u('input[type="checkbox"]').first().prop('checked');

// Проверка выбранной радиокнопки в группе
let selectedRadio = u('input[name="gender"]').filter((el) => el.checked).first().val();

Особенности:

  • prop('checked') возвращает true или false.
  • Для радиокнопок важно использовать фильтр по checked, так как в группе может быть только один выбранный элемент.

Изменение состояния

Umbrella JS позволяет изменять состояние чекбоксов и радиокнопок через .prop():

// Установить все чекбоксы в состояние "отмечено"
u('input[type="checkbox"]').prop('checked', true);

// Снять отметку со всех чекбоксов
u('input[type="checkbox"]').prop('checked', false);

// Выбрать радиокнопку с конкретным значением
u('input[name="gender"]').prop('checked', false); // сначала снимаем все
u('input[name="gender"][value="female"]').prop('checked', true);

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

Получение значений

Для чекбоксов, особенно при множественном выборе, удобно использовать .filter() и .map():

// Массив значений отмеченных чекбоксов
let checkedValues = u('input[type="checkbox"]:checked')
  .map((el) => el.value);

Для радиокнопок:

// Получение значения выбранной радиокнопки
let selected = u('input[name="gender"]').filter((el) => el.checked).first().val();

Обработка событий

Umbrella JS использует метод .on() для привязки событий. Для чекбоксов и радиокнопок чаще всего используется change:

// Отслеживание изменения состояния чекбоксов
u('input[type="checkbox"]').on('change', (e) => {
    let checkbox = u(e.currentTarget);
    console.log('Состояние изменилось:', checkbox.val(), checkbox.prop('checked'));
});

// Обработка выбора радиокнопок
u('input[name="gender"]').on('change', (e) => {
    let selected = u('input[name="gender"]').filter((el) => el.checked).first().val();
    console.log('Выбран пол:', selected);
});

Особенности работы с событиями:

  • e.currentTarget указывает на конкретный элемент, вызвавший событие.
  • Методы .val() и .prop('checked') позволяют одновременно получить данные и текущее состояние.

Массовые операции и фильтры

Umbrella JS облегчает работу с группами элементов с помощью методов .filter(), .each() и .map(). Это особенно полезно для работы с множественными чекбоксами:

// Снять отметку только с чекбоксов, у которых value="option2"
u('input[type="checkbox"]').filter((el) => el.value === 'option2').prop('checked', false);

// Вывести значения всех отмеченных чекбоксов
u('input[type="checkbox"]:checked').each((el) => {
    console.log(el.value);
});

Сочетание с другими методами Umbrella JS

Можно комбинировать работу с чекбоксами и радиокнопками с другими возможностями Umbrella JS, например, с добавлением или удалением классов:

// Подсветка выбранных чекбоксов
u('input[type="checkbox"]').on('change', (e) => {
    let checkbox = u(e.currentTarget);
    checkbox.parent().toggleClass('active', checkbox.prop('checked'));
});

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

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

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

// Делегирование событий на контейнер
u('#form-container').on('change', 'input[type="checkbox"]', (e) => {
    console.log('Динамический чекбокс изменился:', e.currentTarget.value);
});

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

Umbrella JS обеспечивает лаконичный и интуитивно понятный синтаксис для работы с чекбоксами и радиокнопками. Основные преимущества: единый подход к коллекциям элементов, удобные методы для получения и изменения состояния, возможность массовых операций и интеграция с обработчиками событий.

Оглавление