Реализация выбора размера по клику

При разработке интернет-магазинов или каталогов часто возникает необходимость дать пользователю возможность выбрать размер товара простым кликом. Такая интерактивность улучшает пользовательский опыт (UX) и повышает конверсию. В этой статье разберём, как реализовать выбор размера по клику с помощью HTML, CSS и JavaScript.

Базовая структура HTML для выбора размера

Для начала создадим контейнер с кнопками или элементами, каждый из которых соответствует определённому размеру. Используем атрибуты data-size для хранения значения.

<div class="size-selector">
  <button class="size-option" data-size="S">S</button>
  <button class="size-option" data-size="M">M</button>
  <button class="size-option" data-size="L">L</button>
  <button class="size-option" data-size="XL">XL</button>
</div>
<p id="selected-size">Выбран: -</p>

Стилизация активного состояния (CSS)

Добавим стили, чтобы выделить выбранный пункт. Используем класс .active для визуальной обратной связи.

.size-option {
  padding: 10px 20px;
  margin: 5px;
  border: 2px solid #ccc;
  background: #fff;
  cursor: pointer;
  transition: 0.2s;
}
.size-option.active {
  border-color: #3498db;
  background: #3498db;
  color: #fff;
}

Логика выбора на JavaScript

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

const options = document.querySelectorAll('.size-option');
const output = document.getElementById('selected-size');

options.forEach(btn => {
  btn.addEventListener('click', function() {
    // Убираем активный класс у всех
    options.forEach(b => b.classList.remove('active'));
    // Добавляем активный класс текущему
    this.classList.add('active');
    // Обновляем текст
    output.textContent = 'Выбран: ' + this.dataset.size;
  });
});

Альтернативный способ: радиокнопки со стилизацией

Иногда удобнее использовать скрытые радиокнопки, но визуально отображать метки. Это более семантично для форм и не требует JavaScript для отправки данных.

<div class="size-selector">
  <input type="radio" name="size" id="size-s" value="S">
  <label for="size-s">S</label>
  <input type="radio" name="size" id="size-m" value="M">
  <label for="size-m">M</label>
</div>

Стилизуем label как кнопки, а input прячем: input[type="radio"] { display: none; }. При клике на label радиокнопка становится выбранной, и через CSS-селектор :checked + label можно менять внешний вид.

Улучшение UX: анимация и доступность

Для лучшего взаимодействия добавьте плавный переход (transition) и поддержку клавиатуры: используйте role="radio" и aria-checked. Это поможет людям с ограниченными возможностями и позитивно скажется на SEO.

Часто задаваемые вопросы

• Как передать выбранный размер в корзину? Используйте скрытое поле формы или JavaScript для сохранения значения в переменной при клике.
• Можно ли сделать выбор размера без JavaScript? Да, с помощью радиокнопок и CSS - это полностью рабочее решение для статичных форм.
• Как обработать выбор на сервере? При отправке формы значение размера будет в $_POST['size'] (PHP) или аналогично в других языках.