Um botão de opção é um ícone usado em formulários para receber informações do usuário. Ele permite que os usuários escolham um valor do grupo de botões de opção. Os botões de rádio são usados basicamente para seleção única de várias , que é usado principalmente em formulários GUI.
Você pode marcar/marcar apenas um botão de opção entre dois ou mais botões de opção. Neste capítulo, iremos orientá-lo sobre como verificar um botão de opção usando o Linguagem de programação JavaScript .
Para isso, primeiro desenhamos um formulário contendo rádio botões usando HTML e, em seguida, usaremos a programação JavaScript para verificar o botão de opção. Também verificaremos qual valor do botão de opção está selecionado.
Crie um botão de opção
A seguir está um código simples para criar um grupo de botões de opção.
Copiar código
borda usando css
Escolha sua temporada favorita:
VerãoInverno
Chuvoso
Outono
Teste agora
Verifique um botão de opção
Não precisamos escrever nenhum código específico para verificar o botão de opção. Eles podem ser verificados uma vez criados ou especificados no formato HTML.
Porém, temos que escrever o código JavaScript para obter o valor do botão de opção verificado, que veremos no capítulo abaixo:
Verifique se o botão de opção está selecionado ou não
Existem duas maneiras em JavaScript de verificar o botão de opção marcado ou de identificar qual botão de opção está selecionado. JavaScript oferece dois métodos DOM para isso.
A propriedade input radiochecked é usada para verificar se a caixa de seleção está marcada ou não. Usar document.getElementById('id').verificado método para isso. Ele retornará o status verificado do botão de opção como um valor booleano. Pode ser verdadeiro ou falso.
Verdadeiro - Se o botão de opção estiver selecionado.
Falso - Se o botão de opção não estiver selecionado/marcado.
Veja o código JavaScript abaixo para saber como funciona:
Exemplo
Por exemplo, temos um botão de opção chamado Summer e id = 'summer'. Agora, verificaremos através deste id de botão se o botão de opção está marcado ou não.
Copiar código
if(document.getElementById('summer').checked == true) { document.write('Summer radio button is selected'); } else { document.write('Summer radio button is not selected'); } querySelector()
A função querySelector() é um método DOM de JavaScript. Ele usa a propriedade de nome comum dos botões de opção dentro dele. Este método é usado conforme mostrado abaixo para verificar qual botão de opção está selecionado.
document.querySelector('input[name='JTP']:checked')
Exemplo
Por exemplo, temos um grupo de botões de opção com o nome property name = 'season' para todos os botões. Agora, entre esses botões denominados temporada verificaremos qual está selecionado.
desativar o modo de desenvolvedor
Copiar código
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.write('Radio button is selected'); } else { document.write('Nothing has been selected'); } Obtenha o valor do botão de opção verificado:
Usando getElementById()
A seguir está o código para obter o valor do botão de opção verificado usando o método getElementById():
Copiar código
if(document.getElementById('summer').checked) { var selectedValue = document.getElementById('summer').value; alert('Selected Radio Button is: ' + selectedValue); } Usando querySelector()
A seguir está o código para obter o valor do botão de opção verificado usando o método querySelector():
Copiar código
var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { alert('Selected radio button values is: ' + getSelectedValue.value); } Código completo para obter o valor do botão de opção selecionado
Neste exemplo, reuniremos todo o código acima para criar e verificar um botão de opção. Depois disso também buscaremos o valor do botão de opção selecionado.
Copiar código
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { if(document.getElementById('summer').checked) { document.getElementById('disp').innerHTML = document.getElementById('summer').value + ' radio button is checked'; } else if(document.getElementById('winter').checked) { document.getElementById('disp').innerHTML = document.getElementById('winter').value + ' radio button is checked'; } else if(document.getElementById('rainy').checked) { document.getElementById('disp').innerHTML = document.getElementById('rainy').value + ' radio button is checked'; } else if(document.getElementById('autumn').checked) { document.getElementById('disp').innerHTML = document.getElementById('autumn').value + ' radio button is checked'; } else { document.getElementById('error').innerHTML = 'You have not selected any season'; } } Teste agora Saída
Quando você executar o código acima, ele será executado na web e fornecerá a saída conforme mostrado abaixo:
Escolha um dos botões de opção e clique no botão Enviar botão e obtenha o valor selecionado.
Caso você não escolha nenhuma das temporadas e clique diretamente no Enviar botão, ele mostrará uma mensagem de erro que - Você não selecionou nenhuma temporada porque usamos a validação.
Obtenha o valor do botão de opção selecionado: querySelector()
Método DOM querySelector()
A função querySelector() é um método DOM de JavaScript. Este método é usado para obter o elemento que corresponde ao especificado Seletor CSS no documento. Lembre-se de que você precisa especificar a propriedade name do botão de opção no código HTML.
É usado como document.querySelector('input[nome='JTP']:verificado') dentro de guia para verificar o valor do botão de opção selecionado no grupo de botões de opção. Ele minimiza o comprimento do código obtendo o valor do botão de opção selecionado usando uma pequena linha de código.
var selectedValue = document.querySelector('input[name='JTP']:checked')
Veja no código abaixo como ele será utilizado com o formulário HTML:
Copiar código
<br> <b> Choose your favroite season: </b> <br> Summer <br> Winter <br> Rainy <br> Autumn <br> <br> Submit <h3 id="disp" style="color:green"> </h3> <h4 id="error" style="color:red"> </h4> function checkButton() { var getSelectedValue = document.querySelector( 'input[name='season']:checked'); if(getSelectedValue != null) { document.getElementById('disp').innerHTML = getSelectedValue.value + ' season is selected'; } else { document.getElementById('error').innerHTML = '*You have not selected any season'; } } Teste agora Saída
Quando você executar o código acima, ele mostrará a saída na web conforme mostrado abaixo. A partir daqui, escolha sua estação favorita.
Quando você escolhe um valor entre o botão de opção fornecido e clica no Enviar botão, você obterá o valor selecionado na web.
Caso você clique no Enviar botão sem escolher nenhum dos botões de opção, ele mostrará uma mensagem de erro que - Você não selecionou nenhuma temporada .
Então, aqui você pode ver que ambos getElementById('temporada').value e document.querySelector('input[nome='JTP']:verificado') funciona mesmo. Ambos são usados para encontrar o valor do botão de opção verificado. Você pode usar qualquer um deles.
getElementById vs querySelector
Ambos os métodos DOM getElementByID() e querySelector() funcionam quase da mesma forma. No entanto, eles também apresentam algumas diferenças como desempenho e tamanho do código, etc. Vamos ver algumas diferenças entre eles:
Comprimento do código
O código escrito com getElementById é um pouco mais longo que o querySelector. Usando o método getElementById, precisamos verificar cada botão de opção individualmente qual deles está marcado.
Por outro lado, se você usar o método DOM querySelector, basta colocar uma única linha de código para verificar o botão de opção marcado e obter seu valor. Portanto, a conclusão é que querySelector requer menos código.
Desempenho
Ambas as funções oferecem bom desempenho, mas tudo que você precisa saber é qual é a melhor. O getElementById método é muito mais rápido que o querySelector método. O método querySelector também é um pouco complexo.
o que xd significa
Valor usado pelos métodos DOM
O método getElementById sempre usa um id exclusivo de cada botão de opção ao verificar o botão marcado e retorna o primeiro elemento que corresponde ao id.
Enquanto querySelector usa um comum nome (seletor) para todos os botões de opção obter o botão de opção marcado e retornar o primeiro elemento que corresponde ao seletor especificado.