Как показывать определённый кнтент при нажатии на радио кнопки?
Здравствуйте. Я только начал изучать js и нужна ваша помощь. Как показывать определённый блок при нажатии на радио кнопку? Нужно чтобы при нажатии на юр. лицо показывался блок registration__ur, и соотвецтвенно при нажатии ФОП - блок registration__fop.
<div class="registration__radio-btn"> <label for="ur" class="radio__label"> <input type="radio" id="ur" class="radio" name="category"> <span class="radio__costum"></span> Юр. лицо</label> </div> <div class="registration__radio-btn"> <label for="company" class="radio__label"> <input type="radio" id="company" class="radio" name="category"> <span class="radio__costum"></span> ФОП</label> </div> <div class="registration__ur"> <h2 class="registration__item">1. Реквизиты</h2> <form class="registration__form form_four"> <input type="text" placeholder="ОКПО"> </form> <h2 class="registration__item">2. Юридический адрес</h2> <form class="registration__form form_two"> <select name="country"> <option value="country_1">Страна</option> <option value="country_2">Украина</option> </select> <select name="obl"> <option value="obl_1">Область</option> <option value="obl_2">Киевская</option> <option value="obl_3">Львовская</option> <option value="obl_3">Сумская</option> <option value="obl_3">Харьковская</option> </select> <input type="text" placeholder="Город*"> <input type="text" placeholder="Адрес"> <input type="text" placeholder="Индекс"> </form> </div> <div class="registration__fop"> <h2 class="registration__item">1. Реквизиты</h2> <form class="registration__form form_four"> <input type="text" placeholder="ЕДРПО"> </form> <h2 class="registration__item">2. Юридический адрес</h2> <form class="registration__form form_two"> <select name="country"> <option value="country_1">Страна</option> <option value="country_2">Украина</option> </select> <select name="obl"> <option value="obl_1">Область</option> <option value="obl_2">Киевская</option> <option value="obl_3">Львовская</option> <option value="obl_3">Сумская</option> <option value="obl_3">Харьковская</option> </select> <input type="text" placeholder="Город*"> <input type="text" placeholder="Адрес"> </form> </div> |
<div class="registration__radio-btn"> <label for="ur" class="radio__label"> <input type="radio" id="ur" class="radio" name="category"> <span class="radio__costum"></span> Юр. лицо</label> </div> <div class="registration__radio-btn"> <label for="company" class="radio__label"> <input type="radio" id="company" class="radio" name="category"> <span class="radio__costum"></span> ФОП</label> </div> <div class="registration__ur"> <h2 class="registration__item">1. Реквизиты</h2> <form class="registration__form form_four"> <input type="text" placeholder="ОКПО"> </form> <h2 class="registration__item">2. Юридический адрес</h2> <form class="registration__form form_two"> <select name="country"> <option value="country_1">Страна</option> <option value="country_2">Украина</option> </select> <select name="obl"> <option value="obl_1">Область</option> <option value="obl_2">Киевская</option> <option value="obl_3">Львовская</option> <option value="obl_3">Сумская</option> <option value="obl_3">Харьковская</option> </select> <input type="text" placeholder="Город*"> <input type="text" placeholder="Адрес"> <input type="text" placeholder="Индекс"> </form> </div> <div class="registration__fop"> <h2 class="registration__item">1. Реквизиты</h2> <form class="registration__form form_four"> <input type="text" placeholder="ЕДРПО"> </form> <h2 class="registration__item">2. Юридический адрес</h2> <form class="registration__form form_two"> <select name="country"> <option value="country_1">Страна</option> <option value="country_2">Украина</option> </select> <select name="obl"> <option value="obl_1">Область</option> <option value="obl_2">Киевская</option> <option value="obl_3">Львовская</option> <option value="obl_3">Сумская</option> <option value="obl_3">Харьковская</option> </select> <input type="text" placeholder="Город*"> <input type="text" placeholder="Адрес"> </form> </div>
Дополнительно:
Зачем для этого JS? (Если на JS, то это кнопки, а не радио)
<input type="radio" id="ur" class="radio" name="category"> <input type="radio" id="company" class="radio" name="category"> <label for="ur" class="radio__label">Юр. лицо</label> <label for="company" class="radio__label">ФОП</label> <div class="registration__ur"> registration__ur </div> <div class="registration__fop"> registration__fop </div> |
<input type="radio" id="ur" class="radio" name="category"> <input type="radio" id="company" class="radio" name="category"> <label for="ur" class="radio__label">Юр. лицо</label> <label for="company" class="radio__label">ФОП</label> <div class="registration__ur"> registration__ur </div> <div class="registration__fop"> registration__fop </div>
.registration__ur, .registration__fop { display: none; } #ur:checked ~ .registration__ur { display: block /*или какой там ему нужен*/ } #company:checked ~ .registration__fop{ display: block /*или какой там ему нужен*/ } |
.registration__ur, .registration__fop { display: none; } #ur:checked ~ .registration__ur { display: block /*или какой там ему нужен*/ } #company:checked ~ .registration__fop{ display: block /*или какой там ему нужен*/ }
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для того чтобы показывать определенный контент при нажатии на радио кнопку, вам понадобится использовать JavaScript. Вот пример простого кода, который поможет вам реализовать эту функциональность:
```html
Content 1
Content 2
Content 3
This is content 1
This is content 2
This is content 3
function displayContent() {
var radios = document.getElementsByName('content');
var contentDivs = document.querySelectorAll('[id^="content"]');
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
for (var j = 0; j < contentDivs.length; j++) {
contentDivs[j].style.display = 'none';
}
document.getElementById(radios[i].value).style.display = 'block';
}
}
}
```
В этом примере у нас есть три радио кнопки и три блока контента, каждый из которых скрыт с помощью CSS свойства `display: none;`. При клике на радио кнопку вызывается функция `displayContent()`, которая перебирает все радио кнопки и блоки контента. При выборе радио кнопки, соответствующий блок контента становится видимым (свойство `display` устанавливается в `block`).
Таким образом, при нажатии на радио кнопку вы сможете видеть только выбранный контент, остальные блоки будут скрыты. Надеюсь, этот пример поможет вам решить вашу задачу!