25 августа 2013
4017
input, javascript, jquery

Переключение между тегами input, имеющие значения radio на JavaScript

JavaScript
Демонстрация » Скачать »

Урок посвящен работе над тегом input, который имеет значение radio и может в теге form свободно динамически переключаться между вкладками. То есть выбрал input, появилось что то, выбрал другой input появилось еще что то и т.д. Сам скрипт разработан на языке JavaScript

 

Для начала ознакомимся с кодом на JavaScript. В коде я подробно расписал все в комментариях, думаю не может возникнуть каких-либо вопросов.

 

Первый шаг. JavaScript.

 

<script type="text/javascript">
function toggleSlide(set)
// устанавливаем функцию с параметром set
{
var type = set.value;
// задаем переменную с параметром set и значением value
for(var numb=0,elm;elm=set.form.elements[numb];numb++)
// создаем цикл for в котором чередуем и проверяем
// элементы для тега form
if(elm.className=='select_id')
// если класс у элемента select_id, то ...
elm.style.display = elm.id==type? 'inline':'';
// сбрасываем значения стиля display: none и
// выставляем значения display: inline каждому
// открывающимуся тегу fieldset с классом select_id
}
</script>

 

Второй шаг. HTML.

 

Затем мы выводим теги input, устанавливаем каждому значения value, также имя name и придаем событие onclick="toggleSlide(this)".

<table>
<tr>

<td width='200'>
<strong>Радио пусто</strong>
<input type="radio" name="name" value="0"
onclick="toggleSlide(this)" checked>
</td>

<td width='200'>
<strong>Радио 1</strong>
<input type="radio" name="name" value="1"
onclick="toggleSlide(this)">
</td>

<td width='200'>
<strong>Радио 2</strong>
<input type="radio" name="name" value="2"
onclick="toggleSlide(this)">
</td>

</tr>
</table>

 

В дальнейшем все выводим в тегах fieldset, которым указываем, соответствующие идентификаторы, которые были указаны в value у тегов input и устанавливаем класс select_id.

 

<table>
<tr>

<td>
<fieldset id="1" class="select_id">
<p>Открыто значение <b>Радио 1</b></p>
</fieldset>
</td>

<td>
<fieldset id="2" class="select_id">
<p>Открыто значение <b>Радио 2</b></p>
</fieldset>
</td>

</tr>
</table>

 

 

Третий шаг. Стили CSS.

 

И не забудем указать стили css, которые очень важны(иначе скрипт работать будет не правильным образом).

/*Обязательная установка стиля для тега
fieldset display: none*/

fieldset
{
display: none;
padding: 10px;
}

 

Весь код скрипта: не забываем его заключить в тег form, а то не будет работать!

 

<form>
<style>
/*Обязательная установка стиля для тега
fieldset display: none*/

fieldset
{
display: none;
padding: 10px;
}
</style>
<script type="text/javascript">
function toggleSlide(set)
// устанавливаем функцию с параметром set
{
var type = set.value;
// задаем переменную с параметром set и значением value
for(var numb=0,elm;elm=set.form.elements[numb];numb++)
// создаем цикл for в котором чередуем и проверяем
// элементы для тега form
if(elm.className=='select_id')
// если класс у элемента select_id, то ...
elm.style.display = elm.id==type? 'inline':'';
// сбрасываем значения стиля display: none и
// выставляем значения display: inline каждому
// открывающимуся тегу fieldset с классом select_id
}
</script>

<table>
<tr>

<td width='200'>
<strong>Радио пусто</strong>
<input type="radio" name="name" value="0"
onclick="toggleSlide(this)" checked>
</td>

<td width='200'>
<strong>Радио 1</strong>
<input type="radio" name="name" value="1"
onclick="toggleSlide(this)">
</td>

<td width='200'>
<strong>Радио 2</strong>
<input type="radio" name="name" value="2"
onclick="toggleSlide(this)">
</td>

</tr>
</table><br>

<table>
<tr>

<td>
<fieldset id="1" class="select_id">
<p>Открыто значение <b>Радио 1</b></p>
</fieldset>
</td>

<td>
<fieldset id="2" class="select_id">
<p>Открыто значение <b>Радио 2</b></p>
</fieldset>
</td>

</tr>
</table>
</form>

 

 

Спасибо за внимание, всем успехов в своих реализациях!