<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 get the value of each option and use it in a JavaScript function from a onclick ?
You can create a onclick event 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">