Работа с checkbox и radio

Bliss.js предоставляет удобный и лаконичный интерфейс для работы с элементами формы, включая checkbox и radio. Основная идея заключается в том, что библиотека позволяет манипулировать этими элементами как обычными объектами DOM, добавляя удобные методы для прослушивания событий и управления состоянием.

Доступ к элементам checkbox и radio

Для выборки элементов используется метод $:

// Получение одного checkbox по id
var checkbox = $('#agree');

// Получение всех radio кнопок с одним name
var radios = $$('input[name="gender"]');

$ возвращает первый найденный элемент, а $$ — коллекцию элементов. Эти методы можно комбинировать с цепочкой Bliss для дальнейших операций.

Работа с состоянием checkbox

В Bliss.js состояние checkbox управляется свойством checked и методом prop:

// Установка состояния
checkbox.prop('checked', true);

// Проверка состояния
if (checkbox.prop('checked')) {
    console.log('Checkbox выбран');
}

// Инвертирование состояния
checkbox.prop('checked', !checkbox.prop('checked'));

Метод prop универсален для любых свойств DOM, что делает код компактным и читаемым.

Прослушивание событий

Для отслеживания изменений состояния используется метод on:

checkbox.on('change', function() {
    console.log('Состояние изменилось на:', this.checked);
});

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

radios.on('change', function() {
    console.log('Выбранное значение:', this.value);
});

Bliss.js автоматически корректно передаёт контекст this в обработчик, что упрощает работу с элементами.

Манипуляции с группой radio

Выбор радио кнопки из группы осуществляется через свойство checked:

// Установка выбора
radios[0].prop('checked', true);

// Поиск выбранного элемента
var selected = radios.filter(r => r.prop('checked'))[0];
console.log('Выбрано:', selected.value);

Метод filter в Bliss.js работает аналогично стандартному Array.prototype.filter, но позволяет применять его прямо к коллекции элементов, полученной через $$.

Динамическое создание checkbox и radio

Bliss.js поддерживает создание элементов с помощью $ и передачи параметров:

// Создание checkbox
var newCheckbox = $('<input>', { type: 'checkbox', id: 'subscribe', checked: true });

// Создание radio
var newRadio = $('<input>', { type: 'radio', name: 'color', value: 'red' });

Эти элементы можно сразу вставлять в DOM:

$('#form').append(newCheckbox, newRadio);

Работа с атрибутами и значениями

Для доступа к атрибутам используется метод attr:

// Получение value
var val = newRadio.attr('value');

// Изменение value
newRadio.attr('value', 'blue');

Для checkbox часто используется сочетание prop('checked') и attr('value') для синхронизации состояния с данными.

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

Синхронизация состояния с данными:

var preferences = {
    newsletter: true,
    notifications: false
};

$('#newsletter').prop('checked', preferences.newsletter);
$('#notifications').prop('checked', preferences.notifications);

$$('input[type="checkbox"]').on('change', function() {
    preferences[this.id] = this.checked;
});

Реализация выбора цвета через radio:

$$('input[name="color"]').on('change', function() {
    document.body.style.backgroundColor = this.value;
});

Итоговые возможности Bliss.js для checkbox и radio

  1. Прямой доступ к свойству checked через prop — простое управление состоянием.
  2. Групповая работа с radio — выбор и фильтрация выбранного элемента без сложных циклов.
  3. Удобное создание и вставка новых элементов — динамическое формирование интерфейсов.
  4. Упрощённая работа с событиями — единый обработчик на группу элементов, корректный контекст this.
  5. Сочетание prop и attr для синхронизации состояния и атрибутов с данными.

Bliss.js превращает работу с checkbox и radio в чётко структурированный и лаконичный процесс, избавляя от громоздких стандартных манипуляций через document.querySelector и addEventListener.

Оглавление