Как узнать нажатый radio JavaScript!?

Как "узнать нажатый radio js". У вас возникла задача определить какая из кнопок радиоточки type="radio" была нажата.

Отслеживаем нажатие на type="radio"

1. Html код "узнать нажатый radio js"
2. javascript код "узнать нажатый radio js"
3. Код в сборе "узнать нажатый radio js"
4. Пример как "узнать нажатый radio js"

1. Html код "узнать нажатый radio js"

Для того, чтобы узнать "чекнутый"(нажатый) "radio"(радиоточку) вам понадобится собрать html код:

Html:

Создадим несколько input

С type="radio".

+ Потребуется атрибут name у всех одинаковый.

+ Атрибут value с разными значениями:

<input type="radio" name="example" value="красный" > красный

<input type="radio" name="example" value="синий" > синий

<input type="radio" name="example" value="желтый" > желтый

Далее тег button по которому будем отслеживать нажали или нет радиоточку.

Чтобы обратиться по id используем id.

<button id="click_button">Определить </button>

Соберем весь код:

Html код в сборе "узнать нажатый radio js"

<input type="radio" name="example" value="красный" > красный

<input type="radio" name="example" value="синий" > синий

<input type="radio" name="example" value="желтый" > желтый

<button id="click_button">Определить </button>

2. javascript код "узнать нажатый radio js"

После того, как вы разобрались с кодом html "для отслеживания нажатия радиоточки приступим к коду javascript"... для создания такого кода вам понадобится:

Тег script.

Обращаемся к тегам input с помощью getElementsByName, передаем полученную "коллекцию" в переменную.

var the_obj = document.getElementsByName('example');

Используем один из способов onclick:

click_button .onclick = function()

В цикле for перебираем данную коллекцию. Если нажатый "радио" в данной коллекции найдется, то останавливаем цикл break и выведем значение из value с помощью alert:

for ( var i = 0; i < the_obj.length; i++)

{

if(the_obj[i].checked)

{

alert(the_obj[i].value);

break;

}

}

Соберем весь код:

javascript код в сборе "узнать нажатый radio js"

<script>

var the_obj = document.getElementsByName('example');

click_button .onclick = function()

{

for ( var i = 0; i < the_obj.length; i++)

{

if(the_obj[i].checked)

{

alert(the_obj[i].value);

break;

}

}

};

</script>

3. Код в сборе "узнать нажатый radio js".

И далее, теперь уже соберем весь код "узнать нажатый radio js" в одном месте:

Html:

<input type="radio" name="example" value="красный" > красный

<input type="radio" name="example" value="синий" > синий

<input type="radio" name="example" value="желтый" > желтый

<button id="click_button">Определить </button>

javascript:

<script>

var the_obj = document.getElementsByName('example');

click_button .onclick = function()

{

for ( var i = 0; i < the_obj.length; i++)

{

if(the_obj[i].checked)

{

alert(the_obj[i].value);

break;

}

}

};

</script>

4. Пример как "узнать нажатый radio js"

Вам осталось поместить выше приведенный код "узнать нажатый radio js" в сборе прямо здесь и протестировать его работоспособность.

Для того, чтобы проверить будет ли определяться нажатый "type="radio" вам нужно выбрать одну из радиоточек, нажать её и нажать кнопку "Определить":

красный

синий

желтый

Определить

Всего комментариев : Comments+ 2.0

+ =