Обработка событий изменения радиокнопок в JavaScript

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

Чтобы отслеживать изменение состояния группы радио-кнопок, используйте комбинацию методов querySelectorAll и addEventListener, чтобы назначить обработчик события change. Вот пример реализации:

document.querySelectorAll('input[type="radio"][name="groupName"]').forEach(radio => {
    radio.addEventListener('change', () => console.log(radio.value));
});

Ключевые моменты:

• querySelectorAll выбирает все радио-кнопки в группе.
• forEach устанавливает обработчик события change для каждого из элементов группы.
• addEventListener следит за изменениями состояния радио-кнопок.
• console.log(radio.value) выводит значение выбранной кнопки. Вы можете заменить его на функциональность, которая лучше подходит для решения ваших задач.

Эффективное отслеживание состояния

Для быстрого и эффективного контроля состояния радио-кнопок рекомендуется сохранять информацию о последней выбранной кнопке. У нас уже есть переменная для этого:

let previousChoice; // Кто был выбран в прошлый раз?

document.querySelectorAll('input[type="radio"][name="groupName"]').forEach((button) => {
    button.addEventListener('change', function() {
        if (this.checked) {
            // Интересно, но раньше у нас была выбрана другая кнопка?
            console.log(`Предыдущий выбор: ${previousChoice || "не был сделан"}; Текущий выбор: ${this.value}`);
            previousChoice = this.value; // И вот новый выбор!
        }
    });
});

Группировка радио-кнопок с использованием форм

Логическая группировка радио-кнопок внутри HTML-тега <form> обеспечивает не только удобство взаимодействия, но и простоту интеграции с сервером, что обеспечивает чёткую структуру передаваемых данных.

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

Поддержка работы с клавиатурой

Учитывая, что многие пользователи предпочитают использовать клавиатуру вместо мыши, важно обеспечить корректное срабатывание события change при переключении кнопок с помощью клавиш. Дополнительная проверка события click поможет убедиться в этом.

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

Представим радио-кнопки в роли актёров:

Сцена 🎭
[🔘] Актёр 1
[🔳] Актёр 2
[🔳] Актёр 3

Событие OnChange сравнимо с аплодисментами зрителей при появлении нового актёра на сцене:

Актёр 1: [🔘^ (аплодисменты 👏)] [🔳] [🔳]
Актёр 2: [🔳] [🔘^ (аплодисменты 👏)] [🔳]
Актёр 3: [🔳] [🔳] [🔘^ (аплодисменты 👏)]

Когда актёр повторно выходит на сцену, аплодисменты не звучат:

[🔘^] Актёр 1 выходит снова
Состояние события: 🚫 (без аплодисментов 👏, этот актёр уже запомнился!)

Обработка событий в других браузерах

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

Доступность для всех пользователей

Обеспечение высокой доступности приложения является хорошим тоном в разработке. Используя ARIA-атрибуты, вы сделаете радио-кнопки доступными для пользователей-инвалидов.

Ключевое слово 'this' в обработчиках событий

Обработчики событий служат обозревателями для всего, что происходит в приложении. Однако ключевое слово 'this' служит своего рода "шпионским инструментом", предоставляющим детальную информацию о происходящем событии.

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

1. HTMLElement: change event – Web APIs | MDN – Полная информация о событии change.
2. onchange Event — Практическое руководство по работе с интерактивными HTML-формами.
3. Bubbling and capturing — Понятное руководство по механике распространения событий.
4. change event | jQuery API Documentation — Если вы работаете с jQuery, вам полезно будет ознакомиться с официальной документацией метода .change().
5. Events – change — Детальный анализ различий в поведении разных браузеров при обработке события изменений.
6. WebAIM: Creating Accessible Forms – Accessible Form Controls — Сделать формы удобными для всех без исключений.