JSFiddle - React, Tailwind, and code Playground

by Tony Realovich

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form class="sort" action="#">
    <div class="sort__item">
      <input class="sort__input" type="radio" name="sort" id="sort-day" value="sort-day" checked>
      <label class="sort__btn" for="sort-day">DAY</label>
    </div>
    <div class="sort__item">
      <input class="sort__input" type="radio" name="sort" id="sort-name" value="sort-name" disabled>
      <label class="sort__btn" for="sort-name">NAME</label>
    </div>
    <div class="sort__item">
      <input class="sort__input" type="radio" name="sort" id="sort-time" value="sort-time">
      <label class="sort__btn" for="sort-time">TIME</label>
    </div>
    <div class="sort__item">
      <input class="sort__input" type="radio" name="sort" id="sort-price" value="sort-price">
      <label class="sort__btn" for="sort-price">PRICE</label>
    </div>
  </form>
  
</body>
</html>

JavaScript

const form = document.querySelector('.sort');

// Добавляем обработчик события для формы
form.addEventListener('change', event => {
  // Проверяем, является ли целевой элемент радио-кнопкой
  if (event.target.matches('.sort__input')) {
    // Получаем значение атрибута value выбранной радио-кнопки
    const selectedValue = event.target.value;
    
    // Выводим значение в консоль
    console.log(selectedValue);
  }
});