Работа с checkbox и radio

Cash — это компактная и удобная библиотека для работы с DOM в JavaScript, которая предоставляет знакомый синтаксис jQuery, но с меньшим весом и высокой производительностью. Работа с элементами форм, такими как checkbox и radio, является одной из ключевых возможностей библиотеки.

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

Элементы формы можно выбрать с помощью стандартных селекторов CSS:

// Все checkbox на странице
const allCheckboxes = $('input[type="checkbox"]');

// Все radio с именем "gender"
const genderRadios = $('input[name="gender"]');

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

  • Селектор input[type="checkbox"] возвращает коллекцию всех checkbox.
  • Селектор по имени (name) часто используется для групп radio-кнопок, где важно взаимодействовать только с одной группой.

Получение состояния checkbox

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

const checkbox = $('#subscribe');
const isChecked = checkbox.prop('checked');
console.log(isChecked); // true или false

Ключевой момент: prop('checked') возвращает логическое значение, в отличие от attr('checked'), которое отражает только начальное состояние элемента в HTML.

Для получения всех отмеченных checkbox в группе:

const checkedBoxes = $('input[name="features"]:checked');
checkedBoxes.each((el) => {
    console.log(el.value);
});

Метод :checked является удобным CSS-псевдоклассом, который Cash полностью поддерживает.

Установка состояния checkbox

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

const newsletter = $('#newsletter');

// Отметить
newsletter.prop('checked', true);

// Снять отметку
newsletter.prop('checked', false);

// Переключить состояние
newsletter.prop('checked', !newsletter.prop('checked'));

Работа с radio-кнопками

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

Получение выбранного значения:

const selectedGender = $('input[name="gender"]:checked').val();
console.log(selectedGender); // например, "male"

Установка выбранного radio:

// Отметить radio с value = "female"
$('input[name="gender"][value="female"]').prop('checked', true);

Особенность: при отметке одного radio в группе остальные автоматически снимаются.

События checkbox и radio

Cash позволяет легко привязать события к изменениям состояния элементов формы.

// Для checkbox
$('#subscribe').on('change', (e) => {
    console.log('Checkbox состояние:', e.target.checked);
});

// Для radio
$('input[name="gender"]').on('change', (e) => {
    console.log('Выбран пол:', e.target.value);
});

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

  • Событие change срабатывает только после изменения состояния пользователем или через скрипт.
  • Для групп radio достаточно повесить событие на все элементы группы, чтобы отследить изменение выбора.

Массовое управление группой checkbox

Cash позволяет работать с множеством элементов сразу:

// Отметить все checkbox
$('input[type="checkbox"]').prop('checked', true);

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

// Переключить состояние всех checkbox
$('input[type="checkbox"]').each((el) => {
    el.checked = !el.checked;
});

Методы .prop() и .each() обеспечивают высокую гибкость при работе с коллекциями элементов.

Доступ к значениям checkbox и radio

Для получения значения отдельного checkbox используется .val():

const feature = $('#feature1').val();
console.log(feature);

Для группы checkbox удобно собирать все отмеченные значения:

const selectedFeatures = $('input[name="features"]:checked')
    .map((el) => el.value)
    .get();
console.log(selectedFeatures); // массив значений

Метод .map() возвращает объект Cash, поэтому .get() преобразует его в массив чистых значений.

Примеры практического использования

Включение/отключение кнопки по checkbox:

$('#acceptTerms').on('change', (e) => {
    $('#submitBtn').prop('disabled', !e.target.checked);
});

Синхронизация всех checkbox с одним master checkbox:

$('#selectAll').on('change', (e) => {
    $('input[type="checkbox"]').prop('checked', e.target.checked);
});

Автоматическое отображение выбранного radio:

$('input[name="payment"]').on('change', (e) => {
    $('.selected-payment').text(e.target.value);
});

Резюме функционала Cash для checkbox и radio

  • Методы .prop(), .val(), .map(), .each() — базовые инструменты для работы с состоянием и значениями.
  • Псевдокласс :checked упрощает выбор отмеченных элементов.
  • События change позволяют отслеживать изменения состояния.
  • Работа с группами элементов интуитивно понятна и эффективна.

Cash обеспечивает лаконичный и предсказуемый синтаксис при управлении checkbox и radio, позволяя писать чистый и производительный код без лишней сложности.

Оглавление