Como pegar o valor do radio button com JavaScript

Neste artigo você vai aprender a como pegar o valor do radio button com JavaScript, utilizando um método super simples e eficaz!

Fala programador(a), beleza? Bora aprender mais sobre os inputs e JavaScript!

O radio button tem uma maneira diferente dos demais inputs de ter seu valor resgatado

Basicamente nos outros temos acesso a propriedade value, porém todos os radios tem value, como saber qual está marcado?

Pois é exatamente esse o que queremos, certo?

Para isso vamos utilizar o método querySelector, para seleção do elemento

E podemos aplicar o pseudo seletor :checked, pelo nome do input

Veja um exemplo na prática:

const selectedRadio = document.querySelector("input[name='car']:checked").value

console.log(selectedRadio) // Valor do input selecionado

Veja que com o querySelector podemos aplicar seletores de CSS

Aqui estamos selecionado um input radio que tem o nome de car, ou seja, o atributo name está configurado com este valor

Normalmente todos os radios tem o mesmo nome

E pelo seletor checked conseguimos obter o valor do input selecionado, simples não é?

Conclusão

No artigo de hoje você aprendeu a como pegar o valor do radio button com JavaScript

Utilizamos o método querySelector de document, para selecionar o elemento

E depois resgatamos o radio correto com o pseudo seletor :checked de CSS

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos

Nova seção com subtítulo em pergunta, tipo "E se nenhum radio estiver marcado?":

Aqui mora uma pegadinha clássica

Se nenhum radio do grupo estiver selecionado, o querSelector com :checked não acha nada e retorna null

Aí quando você tenta ler o .value direto, o JavaScript quebra com aquele erro de "Cannot read properties of null"

Já me ferrei uma vez por isso, então se liga

O jeito seguro é guardar o elemento primeiro e só depois pegar o value:

const valor = radioMarcado ? radioMarcado.value : null

console.log(valor) // valor do input ou null se nada estiver marcado

Assim seu código não estoura quando o usuário ainda não escolheu nada

Subtítulo em pergunta, tipo "Como pegar o valor ao clicar no radio?":

Na prática você quase nunca quer o valor solto, quer ele NO momento que o usuário escolhe

Pra isso a gente escuta o evento change do grupo de radios

Assim, toda vez que a seleção muda, você já pega o valor novo na hora:

radios.forEach((radio) => { radio.addEventListener("change", (event) => { console.log(event.target.value) // valor do radio recém selecionado }) })

O querySelectorAll pega todos os radios do grupo

E o event.target dentro do change aponta pro radio que foi clicado, então o value já vem certinho

Bora testar isso num formulário de verdade?

Subtítulo em pergunta, tipo "Dá pra pegar o valor sem querySelector?":

Dá sim, e é bom conhecer o caminho alternativo

Se você prefere ir pelo nome do grupo, o getElementsByName devolve todos os radios daquele name

Aí é só percorrer e achar o que está com checked igual a true:

const radios = document.getElementsByName("car")

let valor = null

for (const radio of radios) { if (radio.checked) { valor = radio.value } }

console.log(valor)

É mais verboso que o querySelector com :checked, mas o resultado é o mesmo

Bom ter na manga quando você já tem a lista de inputs em mãos