Input radio со связанными полями с помощью JavaScript

Форма обратной связи позволяет взаимодействовать с пользователями сайта. Одним из видов полей формы является переключатель(radio).

Input radio со связанными полями реализует Задачу: В зависимости от выбранного переключателя radio – выводит под ним дополнительные текстовые поля формы.

Если выбрано radio1 то появляется поле1 (или любая информация), если выбрано radio 2 = поле 2 и т.д.

Получилось это так:
Переключатель radio

один
два
три

Реализация
Задача реализовывалась с помощью Javascript. В зависимости от строения самой формы и тегов <input type=”radio”> получилось несколько вариантов скрипта. Обязательным условием всех скриптом является то, что связанные поля изначально скрыты с помощью стиля display:none.
Во всех вариантах сколько полей столько переменных.

Вариант 1

Этот вариант самый простой. Он используется, если у веб-разработчика есть полный доступ ко всем тегам формы. Тогда нужно присвоить отдельные id каждому тегу <input type=”radio”>, в данном случае r1, r2, r3. а блокам информации присваивается отдельный класс – text, самим кнопкам radio для одного лока присваивается имя block1 (или же  block2 для второго блока).

<h2>Переключатель radio со скрытыми полями</h2> 

<input type='radio' name='block1' id='r1'  />один 
<div class='text' style="display:none;"><input type = "text" ><br> 
<input type = "text" ></div> 
<br> 

<input type='radio' name='block1' id='r2'  />два 
<div class='text'  style="display:none;"><input type = "text" > 
</div> 

<br> 
<input type='radio' name='block1' id='r3' />три 
<div class='text'  style="display:none;"><input type = "text" > 
</div> 

<h2>Второй блок</h2> 

<input type='radio' name='block2' id='r4'  />один 
<div class='text'  style="display:none;">Текст 1</div> 
<br> 

<input type='radio' name='block2' id='r5'  />два 
<div class='text'  style="display:none;">Текст 2 
</div> 

<br> 
<input type='radio' name='block2' id='r6' />три 
<div class='text'  style="display:none;">Текст 3
</div> 



<script> 

//Считаем количество полей radio
var radio = document.getElementsByClassName('text'); 

//считываем все поля radio
var click = [];
for (i=1; i<= radio.length; i++) {
click[i]= document.getElementById('r' + i);
}

function clicking (click) {
click.>
Для этого каждый тег <input type=’radio’> должен иметь свой id.

Дополнительные поля должны быть помещены в тег <div>, каждому тегу также присваивается одинаковый класс и стиль скрывающий этот блок style=”display:none;”.  Этот вариант подошел для реализации на сайтах uCoz в модуле почтовые формы
 
Больше статей:  Скрипт исчезающих рядов таблицы в зависимости от выбранного radio checked
Попробовать в редакторе 
Вариант 2
 
Этот вариант применяется в том случае когда нет доступа к тегам <input type=’radio’>, но есть возможность присвоить id всему внешнему блоку, в который они помещены. В скрипте это блок <div id=”clicks”> Такой вариант у меня возник, когда я использовала этот скрипт для плагина WordPress Contact Form 7.
 
<h2>Переключатель radio со связанными полями</h2> 
<div id="clicks">
<p><input type='radio' name='test' />один </p>
<p><input type='radio' name='test' />два </p>
<p><input type='radio' name='test' />три  </p>
</div>

<div id='text1' style="display:none;"><input type = "text" ><br> <input type = "text" ></div> 
<div id='text2' style="display:none;"><input type = "text" > </div> 
<div id='text3' style="display:none;"><input type = "text" ><br><input type = "text" ><br><input type = "text" > </div>

<script> 
var click = [];
click[0] = document.getElementById('clicks').children[0].children[0];
click[1] = document.getElementById('clicks').children[1].children[0];
click[2] = document.getElementById('clicks').children[2].children[0];

//функция добавления события onclick тегам input
function clicking (click) {
click.>
Обязательными условиями этого варианта являются:
 
 
теги input radio должны быть заключены в отдельный блок со своим собственным id, в примере <div id=”clicks”>;
 
каждый тег input radio должен быть внутри других тегов. Это могут быть теги <p>…</p>, как в примере, или <span>…</span> или другие;
 
Больше никаких других тегов внутри блока <div id=”clicks”> быть не должно
 
Ну и конечно, обязательно каждое скрытое поле (или др информация) должно быть внутри тега <div> со стилем display:none;
 
 
Попробовать в редакторе 
Вариант 3
 
С этого варианта все начиналось. Этот скрипт получился достаточно запутанный, именно на смену ему я и создала первые два варианта, но я решила оставить его в этой статье для примера, так как его создание очень подробно описано. Особенность его является то, что тег <input type=’radio’> является соседним к тегу скрытого поля, и индентифицируется с помощью previousElementSibling.

Обязательные условия для работы скрипта
 
 
В разметке HTML скрытые поля (или любая другая скрытая информация) должны быть помещены между тегами div
 
Тег div обязательно должен располагаться сразу после соответствующего тега input, так как в скрипте используется previousElementSibling. Это обязательное условие.
 
Самому тегу div изначально заданный стиль display:none;
 
Тегу div нужно задать идентификатор (id) – любое имя на ваше усмотрение. Оно и будет употребляться в скрипте.
 
 
<h2>Переключатель radio с всплывающими полями</h2>

<input type='radio' name='test' id='r1' >
Разберем код подробнее:
 
 
скрипте выше три переключателя. Вы можете сделать сколько угодно. Главное каждому переключателю, в котором должен использоваться скрипт необходимо добавить вызов функции скрипта: 
>

Когда добавляется новые переключатель, за ним сразу должен следовать следующий блок div
<div id=' ' style="display:none;"> 

</div>
 
id – идентификатор (уникальное имя): любое слово написанное латиницей.
 
Скрытым могут быть не только дополнительные текстовые поля, но и любая информация помещенная внутри тегов div.
 
При добавлении новых полей нужно также добавить переменные в самом скрипте 
var name = document.getElementById('idname');
 
name – задаете любое имя переменной;

idname – соответствует идентификатору (id) блока div
 
 
Попробовать в редакторе 
Больше статей:  Метод getElementsByClassName кроссбраузерно