Como verificar se um botão de rádio é selecionado com JavaScript
Botões de rádio, uma parte essencial dos formulários HTML, permitem que os usuários selecionem uma das múltiplas opções. Eles podem ser criados simplesmente usando o Tag do tipo "rádio". Os botões de rádio são usados em um grupo de dois ou mais botões com um nome comum. Isso facilita a busca de um único objeto e verificar seu status. O status de um botão de rádio pode ser verificado usando dois métodos diferentes que serão discutidos nesta redação.
A primeira etapa de ambos os métodos é a mesma que é criar um formulário contendo botões de rádio:
Configurando um formulário HTML
Vamos apenas criar um formulário HTML simples com alguns botões de rádio:
Escolha sua cor favorita
No código acima, usamos primeiro um simples
tag para dar um título para que o usuário possa entender facilmente o objetivo de nossa forma, que é escolher uma cor favorita. Nós então usamos o tag para criar um formulário, dentro do qual usamos Tags para criar três botões de rádio que oferecem opções diferentes para os usuários.
Nós também usamos o Tags para rotular nossos botões de rádio. Nós então usamos alguns
Tags para nos dar algumas quebras de linha para que toda a forma pareça agradável e uniformemente espaçada. O formulário terminou com um tag que pode ser usada para enviar nosso formulário. O chama o checkValue () função quando é clicado.
Agora vamos escrever o código JavaScript para definir o checkValue () função para verificar qual botão de rádio foi selecionado:
Método 1: Usando o getElementsByName ()
Podemos usar o .verificado() Propriedade para verificar se um botão de rádio foi selecionado ou não:
função checkValue ()
VAR Radios = documento.getElementsByName ("cor");
para (const Radio of Radios)
if (rádio.verificado)
Alerta (rádio.valor + "é sua cor favorita");
quebrar;
Dentro de checkValue () função que declaramos primeiro uma variável nomeada rádios que recebe a Nodelist de todos os botões de rádio com a cor do nome. Nós então iteramos sobre o Nodelist e verifique o status de cada botão de rádio. Se um botão de rádio foi selecionado, usamos o alerta() método para exibir qual cor foi selecionada.
O código para toda a página da web:
Escolha sua cor favorita
Se quisermos verificar se um botão de rádio individual, podemos dar um ID exclusivo e depois usar o getElementsById () método para armazená -lo em uma variável. Podemos então usar o verificado() propriedade para verificar se o botão foi escolhido.
Método 2: Usando o método QuerySelectorAll ()
O QuerySelectorAll () O método toma um seletor CSS como argumento e retorna uma lista de nodel de todos os elementos que correspondem ao seletor especificado:
função checkValue ()
VAR Radios = documento.QuerySelectorAll ('input [name = "color"]');
para (const Radio of Radios)
if (rádio.verificado)
Alerta (rádio.valor + "é sua cor favorita");
quebrar;
A definição do checkValue () A função é quase a mesma nos dois métodos. A diferença é do método que recebe a lista de nodelas dos botões de rádio. Método 2 usa o QuerySelectorAll () Método para obter a lista de nodel.
Escolha sua cor favorita
Conclusão
Os botões de rádio são usados para obter a preferência do usuário de uma lista de opções. Grupos de botões de rádio podem ser formados, dando o mesmo valor aos seus atributos de nome. Apenas um botão de rádio pode ser selecionado por vez. Este post foi sobre como podemos usar o JavaScript para verificar se um botão de rádio está selecionado.