Radio input check - Javascript

Asked

Viewed 632 times

1

I need to verify which of 3 different Radios is selected for a check.

<input type="radio" name="frame" id="framework" value="react"> React
<input type="radio" name="frame" id="framework" value="angular"> Angular
<input type="radio" name="frame" id="framework" value="vue"> Vue 

I wanted to use the Switch there are only 2 results - Angular and React return the same - so it would take an Enum data check

1 answer

1


I need to verify which of 3 different Radios is selected for a check.

To check if one of input type=radio was selected do the following code:

function escolhido() {
  var res = '';
  const items = document.getElementsByName('frame');
  for (var i = 0; i < items.length; i++) {
    if (items[i].checked) {
      res = items[i].value
      break;
    }
  }  
  return res;
}

function verificar() {
  const res = escolhido();
  if (res === '') {
    alert('nenhum item foi selecionado');
    return false;
  }
  alert('O item selecionado foi ' + res);
  return true;
}
<input type="radio" name="frame" id="framework" value="react"> React
<input type="radio" name="frame" id="framework" value="angular"> Angular
<input type="radio" name="frame" id="framework" value="vue"> Vue

<button type="button" onclick="verificar()">Verificar</button>

or a summary code:

function verificar()
{
  const item = document
       .querySelectorAll("input[name^='frame']:checked");       
  if (item.length === 1) {
    console.log(item[0].value);
    return item[0].value;      
  }
  console.log('Não selecionado');
  return false;
}
<input type="radio" name="frame" id="framework" value="react"> React
<input type="radio" name="frame" id="framework" value="angular"> Angular
<input type="radio" name="frame" id="framework" value="vue"> Vue

<button type="button" onclick="verificar()">Verificar</button>

where the search would be by the name of radio and whether it is selected.


You said:

I wanted to use the Switch there are only 2 results - Angular and React return the same - so it would take an Enum data check

I really didn’t understand the purpose of using the switch, I believe that the solution is only the search of the selected and the switch might not bring a dynamic result.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.