Take the value of a radio input with Javascript

Asked

Viewed 1,406 times

1

<input type="radio" name="opcao" id="1" value="op1">
<input type="radio" name="opcao" id="2" value="op2">
<input type="radio" name="opcao" id="3" value="op4">
<input type="radio" name="opcao" id="4" value="op8">

How do I take the value of each option and use in a Javascript function from a onclick?

javascript

1 answer

0


You can create an event onclick for each radio and send the value to another function:

// aqui eu crio uma coleção de todos os input do tipo radio
// o seletor "input[type='radio']" é: nome_da_tag[atributo=valor]
var radios = document.body.querySelectorAll("input[type='radio']");

// faço um loop na coleção começando do índice 0 até o limite da
// coleção (quantidade - 1). Por isso o x só deve ser menor do que
// a quantidade de itens na coleção
for(var x=0; x<radios.length; x++){

   // crio um evento onclick individual para cada elemento
   radios[x].onclick = function(){
   
      // this.value => o "this" é o elemento clicado
      // e "value" o valor dele. Envio para a função "clique()"
      // o valor em forma de parâmetro
      clique(this.value);
   }
}

// função que vai receber o valor do radio clicado
// em forma de um parâmetro que chamei de "i"
function clique(i){
   console.log(i);
}
<input type="radio" name="opcao" id="1" value="op1">
<input type="radio" name="opcao" id="2" value="op2">
<input type="radio" name="opcao" id="3" value="op4">
<input type="radio" name="opcao" id="4" value="op8">

  • can save this.value to a variable? so that I can compare it to another value?

  • You got it, just do it var variavel = this.value;

  • Or in function clique(): var variavel = i;

  • There is a lot of material on the Internet. Best to learn is to go creating questions and seeking answers.

  • I will add comments to the code to facilitate understanding and what each thing does.

Browser other questions tagged javascript

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