Como obter informações com botões de rádio em javascript

JavaScript é uma linguagem de programação que oferece aos nossos aplicativos e páginas da web a capacidade de pensar e agir, tornando -os interativos. O JavaScript nos oferece botões de rádio que são usados ​​para configurar um grupo de opções relacionadas com apenas um botão de rádio escolhido de cada vez. Os botões de rádio são usados ​​principalmente em formas e usados ​​com o elemento HTML. Os botões de rádio são muito úteis quando o desenvolvedor deseja que o usuário selecione apenas uma opção das várias opções fornecidas.

Por exemplo, seu aplicativo da web aceita email ou número de telefone e você deseja que o usuário selecione um e não ambos. Os botões de rádio são úteis para alcançar esta tarefa. Primeiro, definiremos botões de rádio em HTML e depois iremos em direção a JavaScript para que possamos obter informações com botões de rádio.

Html

Escolha sua opção preferida

E-mail

Telefone

No código HTML acima, usamos dois botões de rádio e demos o nome do contato. É necessário dar o mesmo nome ao mesmo grupo de botões de rádio para que apenas um possa ser selecionado ao mesmo tempo. Também usamos rótulos para rotular nossos botões de rádio de entrada. Veremos a seguinte saída em nosso navegador quando executarmos o código acima:

Também podemos ver que apenas um botão de rádio pode ser selecionado a qualquer momento. Antes de ir para a parte do JavaScript, vamos iniciar um envio no HTML também para que possamos ouvir mais tarde para eventos neste botão.

Escolha sua opção preferida

E-mail

Telefone
Enviar

Iniciamos um botão e demos um evento onclick para que, quando o usuário clique no enviar Botão, a função HandleClick () começará a executar. No final, referenciamos nosso nome de arquivo JavaScript com a ajuda de roteiro marcar e usar o src atributo passou o nome do arquivo que é código.JS.

JavaScript

Agora que definimos dois botões de rádio no HTML, vamos dar o próximo passo para obter a entrada do botão de rádio, portanto, é necessário primeiro determinar qual botão de rádio está ativo ou selecionado. Para esse fim, usaremos querySelectorAll (), que selecionará todos os botões de rádio com o nome de contato.

functionHandLeclick ()
constradiobuttons = documento.QuerySelectorAll ('input [name = "contact"]');
LetSelectedValue;
para (Constrbofradiobuttons)
if (rb.verificado)
selectedValue = RB.valor;
quebrar;


if (selectedValue)
alerta (seletedvalue);

outro
alerta ("Selecione uma opção");

No JavaScript acima, a função handleclick () é criada no início, que é chamado do HTML enviar botão. Depois disso, usando o QuerySelectorAll ("Input [nome =" Contato "]") Selecionamos todos os botões de rádio que têm o nome do contato e salve a referência de todos os botões de rádio na variável botões do rádio. Depois disso, criamos um loop que iterará em todos os botões de rádio e verificaremos se algum botão de rádio é verificado ou não, o que significa que o botão de rádio está selecionado ou não. Se um botão de rádio for selecionado, ele armazenará o valor desse botão de rádio no SelectedValue variável.

Quando o loop termina, unificamos a instrução if/else que verifica se a variável selecionouctedVale está vazia ou não. Se tiver algum valor, alertará esse valor, caso contrário, um alerta de Por favor selecione uma opção será mostrado ao usuário.

Podemos ver na saída acima que, quando não selecionamos um botão de rádio, o alerta nos mostrou a mensagem que Por favor selecione uma opção. No entanto, quando selecionamos o E-mail botão de rádio, vemos o valor do email e quando selecionamos o Telefone botão de rádio então vemos o valor do telefone.

Conclusão

Para configurar um grupo de opções relacionadas e selecionar apenas um em um dado horário, os botões de rádio são usados. Os botões de rádio são iniciados com <entrada> elementos de HTML e o verificado A propriedade é usada em JavaScript para ver se um botão de rádio foi selecionado ou não. Os botões de rádio são muito úteis quando há várias opções disponíveis e o desenvolvedor deseja que o usuário selecione apenas um. Neste post, aprendemos a obter informações com botões de rádio em javascript.