Как показывать определённый кнтент при нажатии на радио кнопки?

Для отображения определенного контента при нажатии на радио кнопки в JavaScript вы можете использовать обработчик события "change". Это событие происходит, когда значение выбранной радио кнопки изменяется.

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

<input type="radio" id="option1" name="content" value="option1">
<label for="option1">Option 1</label>
<input type="radio" id="option2" name="content" value="option2">
<label for="option2">Option 2</label>

Далее, нужно определить обработчик события "change" для радио кнопок. В этом обработчике мы будем показывать или скрывать определенный контент. Воспользуемся методом "querySelectorAll" для выбора всех радио кнопок и циклом "forEach" для добавления обработчика каждой из них. Например:

// Получаем все радио кнопки и добавляем обработчик события для каждой
const radioButtons = document.querySelectorAll('input[type="radio"]');
radioButtons.forEach(button => {
  button.addEventListener('change', function() {
    const selectedValue = this.value;
    
    // Отображаем или скрываем контент в зависимости от выбранной радио кнопки
    if (selectedValue === 'option1') {
      // Показываем контент для Option 1
      document.getElementById('option1-content').style.display = 'block';
      document.getElementById('option2-content').style.display = 'none';
    } else if (selectedValue === 'option2') {
      // Показываем контент для Option 2
      document.getElementById('option1-content').style.display = 'none';
      document.getElementById('option2-content').style.display = 'block';
    }
  });
});

Здесь мы используем значение радио кнопки, чтобы определить, какой контент нужно показать. Предположим, что у нас есть два блока контента для каждой опции: "option1-content" и "option2-content". Мы используем метод "getElementById" для доступа к DOM элементам и изменяем свойство "display" стиля, чтобы показать или скрыть соответствующий контент при выборе соответствующей опции.

Не забудьте добавить соответствующий CSS стиль для контента, чтобы показывать и скрывать его при необходимости. Например:

#option1-content,
#option2-content {
  display: none;
}

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