Уроки Переключение между тегами input, имеющие значения radio на JavaScript
25 августа 2013
4867
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>

 

 

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





Роман Краутер