Como obter o valor do botão de rádio selecionado usando JavaScript?

Os botões de rádio são um dos elementos mais cruciais do HTML ao tentar construir um formulário. Os botões de rádio oferecem ao usuário algumas opções das quais ele só pode escolher uma única opção.

Normalmente, quando queremos obter o valor de um elemento de uma página da web html, simplesmente usamos a propriedade Value desse elemento em JavaScript. Mas não podemos fazer isso com botões de rádio. O motivo é que não é uma boa prática buscar os valores de botões de rádio individuais. Portanto, queremos apenas um valor e isso é do botão de rádio selecionado

O processo de buscar o valor de um botão de rádio selecionado inclui as seguintes etapas:

• Primeiro: Obtenha uma referência ao grupo de botões de rádio em JavaScript
• Segundo: a partir da lista de botões de rádio, filtre aquele com o “verificado" propriedade
• Terceiro: obtenha o atributo de valor do botão de rádio filtrado

Vamos criar um exemplo para mostrar essas etapas.

Etapa 1: configure uma página da web html

Crie uma página da Web HTML com as seguintes linhas dentro dela:

O que você gostaria de aprender?

Guitarra

Violino

Cajon

Aprender

As seguintes coisas estão acontecendo no código mencionado acima:

• Estamos criando um contêiner no qual colocaremos nossos botões de rádio e o botão "Learn"
• Então estamos perguntando ao usuário sobre o instrumento que ele deseja aprender
• As opções são dadas na forma de botões de rádio
• Cada botão de rádio tem seu próprio eu ia e valor Mas o mesmo nome para agrupar -os
• Então uma A tag é adicionada para cada botão de rádio
• Um botão foi adicionado na página da web, para enviar a escolha do usuário.

Inicie a página da web html e você obterá esta saída no seu navegador.

Temos botões de rádio e nosso botão Learn no meio da página da web.

Etapa 2: Escreva o código JavaScript para exibir a escolha do usuário

Queremos executar uma função no arquivo de script ao clicar no “Aprender" botão. Portanto, adicionamos as seguintes linhas:

documento.getElementById ("Learn").OnClick = function ()
// O próximo código entraria dentro dela
;

Dentro desta função, obtenha a referência DOM do nosso grupo de botões de rádio usando a seguinte linha

var radiobutTonGroup = documento.getElementsByName ("Instrument");

Depois disso, filtre esse grupo de botões de rádio para encontrar o que é verificado e armazená -lo dentro de outra variável usando a seguinte linha

var checkedRadio = matriz.De (RadiobutTonGroup).encontre ((rádio) => rádio.verificado);

Por fim, solicite ao usuário sobre o instrumento que ele \ ela deseja aprender usando a função de alerta

alerta ("Você selecionou:" + CheckedRadio.valor);

O arquivo de script completo se parece com este

documento.getElementById ("Learn").OnClick = function ()
var radiobutTonGroup = documento.getElementsByName ("Instrument");
var checkedRadio = matriz.De (RadiobutTonGroup).encontrar(
(rádio) => rádio.verificado
);
alerta ("Você selecionou:" + CheckedRadio.valor);
;

Etapa 3: testando o script

Atualize a página da web, selecione um botão de rádio e clique no botão que diz “Aprender”. Você deve obter a seguinte saída:

Você buscou com sucesso o valor de um botão de rádio verificado e alertou o usuário sobre sua escolha.

Embrulhar

Para obter o valor de um botão de rádio selecionado em JavaScript, temos que seguir um conjunto de etapas. O primeiro passo é obter uma referência de JavaScript aos botões de rádio com o mesmo nome. Depois disso, queremos filtrar o botão de rádio que tem a propriedade marcada marcada. Depois disso, use o botão de rádio da loja para obter o valor usando o atributo de valor do elemento HTML. Então você pode trabalhar com o valor buscado.