Управление группами радиокнопок в форме: деселекция в JS

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

Для контроля над несколькими группами радиокнопок, расположенными в рамках одной формы, используйте уникальные атрибуты name. Это поможет отделять группы и внедрить возможность индивидуального выбора:

<!-- Группа 1: Цвет определяет человека -->
<input type="radio" name="color" value="Red"> Яркий Красный 🚀
<input type="radio" name="color" value="Blue"> Глубокий Синий 💎

<!-- Группа 2: Размер имеет значение -->
<input type="radio" name="size" value="Small"> Компактный 🛄
<input type="radio" name="size" value="Large"> Величественный 🛍️

Атрибуты name здесь действуют как скрытые разделители, обеспечивая целостность взаимодействия пользователя.

Визуальное разделение с помощью fieldset

Для наглядного разделения групп радиокнопок можно использовать тег <fieldset>. Он формирует как визуальную, так и семантическую структуру, повышая доступность информации для пользователей со скринридерами:

<form>
  <fieldset>
    <legend>Какой ваш любимый цвет?</legend>
    <!-- Радиокнопки для выбора цвета... -->
  </fieldset>

  <fieldset>
    <legend>Какой размер вы предпочитаете?</legend>
    <!-- Радиокнопки для выбора размера... -->
  </fieldset>
</form>

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

Для разработчиков на Angular: применение директивы *ngFor упрощает создание динамических групп радиокнопок. Управление выбранным вариантом упрощают события (click):

<!-- Шаблон на Angular -->
<div *ngFor="let group of radioGroups">
  <fieldset>
    <legend>{{group.title}}</legend>
    <label *ngFor="let option of group.options">
      <input type="radio" name="{{group.name}}" value="{{option.value}}" (click)="selectOption(group, option)">
      {{option.label}}
    </label>
  </fieldset>
</div>

Структурирование и управление формой

Для улучшения структурированности и доступности формы используйте элементы <div> и <fieldset> для разделения групп радиокнопок на навигационные секции:

<form>
  <div class="radio-group">
    <fieldset>
      <!-- Содержимое первой группы -->
    </fieldset>
  </div>
  <div class="radio-group">
    <fieldset>
      <!-- Содержимое второй группы -->
    </fieldset>
  </div>
</form>

Не забывайте, что значения атрибутов value должны соответствовать тексту в legend или label, чтобы обеспечить комфортное взаимодействие пользователей со скринридерами:

<fieldset>
  <legend>Выберите способ оплаты</legend>
  <label>
    <input type="radio" name="payment" value="Credit Card"> Надёжная кредитная карта 💳
  </label>
  <label>
    <input type="radio" name="payment" value="PayPal"> Удобный PayPal 💰
  </label>
</fieldset>

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

Вообразите банкет с несколькими столами, на каждом из которых представлен свой сорт сока:

Стол 1: Цитрусовые вкусы 🍊🍋
- [ ] Сок из апельсина
- [x] Сок из лимона
- [ ] Сок из грейпфрута

Стол 2: Ягодные вкусы 🍓🫐
- [x] Сок из земляники
- [ ] Сок из черники
- [ ] Сок из малины

Каждый стол здесь — это группа радиокнопок, а каждый выбор сока — потенциальный вариант выбора. Важно, что можно выбрать только один вариант на группу, так же как и сок на столе.

**Ключевая идея**: Каждый стол ➡️ Одно блюдо
В контексте формы:
🍽️🎉 'Стол' – это группа радиокнопок
📋 Форма состоит из нескольких 'столов'
✅ Только одно 'блюдо' (кнопка) выбирается для каждого 'стола'

Помните о взаимоисключающем выборе, как если бы вы выбирали напиток за столом ужина.

Сложные случаи: Как избежать ошибок

Последовательное наименование: Важно для анализа

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

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

Необходимость отмены выбора: Воспользуйтесь JavaScript

Стандартные HTML-радиокнопки не предусматривают возможности отмены выбора. Если данная опция требуется, можно воспользоваться JavaScript, который позволяет сделать выбор обратимым.

Особенности работы в Angular: Будьте аккуратны при выборе привязок!

При работе с Angular имейте в виду: для динамических групп следует использовать [name], а не [attr.name], чтобы Angular корректно сгруппировал радиокнопки.

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

1. HTMLFormElement – Web APIs | MDN — подробные разъяснения работы с элементами HTML форм.
2. HTML тег форма — информация о способах использования и реализации тега <form> в HTML.
3. Типы ввода HTML — руководство по типам поля ввода, в том числе радиокнопок.
4. Стандарт HTML — описание характеристик состояния радиокнопок в HTML формах.
5. jquery – изменение текста радиокнопки – Stack Overflow — обсуждения и решения, связанные с радиокнопками.
6. WebAIM: Создание доступных форм – Доступные элементы управления форм — лучшие подходы к созданию доступных радиокнопок.