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