Программное переключение radio-кнопок в JavaScript без jQuery

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

Не знаете, как отменить выбор радиокнопки? Просто сделайте двойной клик мыши. Программатически это можно реализовать с помощью JavaScript и обработчика события onClick. Он будет отслеживать, была ли последняя активная кнопка нажата повторно, и если да, то снимет с нее активность.

let prevRadio, lastClicked;

document.addEventListener('click', function(e) {
  if (e.target.type === 'radio') {
    if (e.target === prevRadio) {
      e.target.checked = false;
      lastClicked = null;
    } else {
      lastClicked = e.target;
    }
  }
});

Вставьте этот скрипт в HTML-код страницы после разметки радиокнопок, чтобы поддерживать данную функциональность.

Понимание обработки кликов

Обработка событий клика в JavaScript – ключевой момент при добавлении описанной функциональности. Рассмотрим несколько нюансов, которые вам необходимо учесть при реализации этого функционала.

Уличный артист: работа с динамическими элементами

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

document.addEventListener('click', function(e) {
  if (e.target.matches('input[type="radio"]')) {
    // Идёт выполнение логики делегирования событий
  }
});

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

Пианист: использование клавиш Ctrl и Cmd

Использование клавиш Ctrl и Cmd при работе с радиокнопками – это как игра на пианино, используя его всеми руками. Давайте воспользуемся всеми доступными инструментами.

document.addEventListener('click', function(e) {
  if (e.ctrlKey || e.metaKey) {
    // Реализация усовершенствованного взаимодействия с пользователем
  }
});

Семейное древо: установление связи между элементами формы

Отношение между радиокнопкой и формой можно сравнить с историей любви Ромео и Джульетты. Вспомощь придет метод .closest().

let radio = e.target;
let form = radio.closest('form'); // Время знакомства с "родственниками"

Зеркальное отражение: обеспечение доступности

Нельзя забывать акцентировать событие 'change', когда меняется свойство 'checked', чтобы избежать непредсказуемости выполнения кода.

e.target.checked = false; 
e.target.dispatchEvent(new Event('change')); // Предотвращаем неожиданные сюрпризы

Оптимальный вариант: предложение "Нет ответа"

В некоторых случаях лучшим решением будет добавить опцию «нет ответа», предполагающую ввод соответствующего элемента выбора:

<label><input type="radio" name="option" value=""> Предпочитаю не отвечать </label>

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

Чтобы лучше понять принцип работы радиокнопок в HTML, можно представить их как выключатель:

Суть идеи в том, что кнопка имеет возможность выключаться тем же действием, каким она включалась.

// Произошел клик по другой кнопке
document.querySelector('input[type="radio"]').checked = false;

Мы меняем состояние с выключенного на включенное и обратно.

До: (🔘 ВКЛ) После: (⚪️ ВЫКЛ)

Решение возникающих проблем

Маршрут памяти: использование атрибутов данных

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

document.addEventListener('click', function(e) {
  // Логика проверки и изменения состояния
});

Одинокий волк: индивидуальные обработки радиокнопок

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

$('input[type="radio"]').each(function() {
  // Индивидуальная логика описана здесь
});

Амёба: донастройка динамических групп радиокнопок

Как и амёба, динамические части кода требуют гибкости и точности. Освойте навык исключения активной кнопки из группы – это настоящее мастерство.

$('input[name="group"]').not(':checked').prop('checked', true);

Волшебный ковёр: применение горячих клавиш

В мире программирования иногда с помощью клавиш-горячек можно добавить немного волшебства во взаимодействие с интерфейсом.

document.addEventListener('keydown', function(e) {
  if (e.code === 'Space') {
    // Здесь происходят особые взаимодействия
  }
});

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

1. how to set radio option checked onload with jQuery – Stack Overflow — C помощью этого материала вы узнаете, как управлять состоянием радиокнопок с помощью JavaScript.
2. <input type="radio"> – HTML: HyperText Markup Language | MDN — Здесь описаны все возможности и свойства HTML-элемента радиокнопка.
3. How To Create a Custom Checkbox and Radio Buttons — Данное руководство поможет вам стилизировать радиокнопки, чтобы они выделялись.
4. The "Checkbox Hack" (and things you can do with it) | CSS-Tricks — Как можно творчески использовать чекбоксы и радиокнопки с применением CSS.
5. HTML DOM Input Radio Object — Познакомьтесь с возможностями управления радиокнопками через DOM в JavaScript.
6. ARIA Authoring Practices Guide | APG | WAI | W3C — Узнайте, как создавать доступные радиокнопки, чтобы ваш код был понятен всем пользователям.
7. Form properties and methods — Глубокое понимание работы с формами в JavaScript обеспечивает это подробное руководство.