Узнать нажатый radio

12.10.2023 Марат 113 0 js

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

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

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

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>

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>

Код в сборе "узнать нажатый 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>

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

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

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

красный

синий

желтый