Какая логика следует использовать, чтобы отображать определенное содержимое в зависимости от выбора радиокнопки?

Question

EmberTide

javascript , html , css

Какая логика следует использовать, чтобы отображать определенное содержимое в зависимости от выбора радиокнопки?

Как можно публиковать определенный блок при выборе радиокнопки в JavaScript? Например, когда я нажимаю на кнопку "юр. лицо", мне нужно показать блок с идентификатором "registration__ur". Аналогично, если я выбираю кнопку "ФОП", нужно показать блок с идентификатором "registration__fop". Можете поделиться советами по реализации этого поведения?

12 октября 2023 г. 8:18

Ответы на вопрос 1

Похожие вопросы

Answer 1

Для реализации данного поведения в JavaScript, вы можете использовать следующую логику:

1. Добавьте обработчики событий для радиокнопок "юр. лицо" и "ФОП". 

2. Внутри обработчиков событий, используйте условные операторы, чтобы проверить, какая радиокнопка была выбрана.

3. В случае выбора кнопки "юр. лицо", отобразите блок с идентификатором "registration__ur", установив его стиль display в значение "block". И скройте блок с идентификатором "registration__fop", установив его стиль display в значение "none".

4. В случае выбора кнопки "ФОП", отобразите блок с идентификатором "registration__fop", установив его стиль display в значение "block". И скройте блок с идентификатором "registration__ur", установив его стиль display в значение "none".

Вот пример кода, который демонстрирует эту логику:

```html
<input type="radio" name="registration" value="ur" id="registration__ur_radio"> юр. лицо
<input type="radio" name="registration" value="fop" id="registration__fop_radio"> ФОП

<div id="registration__ur" style="display: none;">Блок для юр. лиц</div>
<div id="registration__fop" style="display: none;">Блок для ФОП</div>

<script>
 document.getElementById("registration__ur_radio").addEventListener("click", function() {
   document.getElementById("registration__ur").style.display = "block";
   document.getElementById("registration__fop").style.display = "none";
 });
 
 document.getElementById("registration__fop_radio").addEventListener("click", function() {
   document.getElementById("registration__fop").style.display = "block";
   document.getElementById("registration__ur").style.display = "none";
 });
</script>
```

При выборе радиокнопки "юр. лицо" будет отображаться блок с id "registration__ur". При выборе радиокнопки "ФОП" будет отображаться блок с id "registration__fop".