Como verificar um botão de rádio usando JavaScript ou jQuery
- Verifique o botão de rádio usando JavaScript
- Verificar o botão de rádio usando jQuery
- Verifique o botão do rádio com base em um clique no botão
Muitas vezes usamos scripts do lado do cliente como jQuery ou JavaScript, para criar sites interativos e de rápida execução e podemos completar operações simples como validações de formulários de forma eficiente sem nenhuma viagem extra ao servidor web.
Dado um cenário em que queremos um botão de rádio selecionado por padrão ou em um evento de clique de botão, podemos usar JavaScript ou jQuery.
Comecemos definindo um formulário.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
Verifique o botão de rádio usando JavaScript
Selecione o botão de rádio usando ID
Uma das melhores maneiras possíveis de pré-selecionar um botão de rádio é referenciá-lo por sua identificação. Para selecionar o elemento DOM utilizando o ID, adicionamos o prefixo # ao ID e definimos o valor verificado como verdadeiro.
document.querySelector('#myradio_1').checked = true;
Resultado: O botão de rádio 1 é selecionado.
Selecione o botão de rádio usando o valor
Uma opção alternativa é usar o valor do botão de rádio para pré-selecionar o botão de rádio. A seleção por valor pode ser útil em cenários onde não sabemos a identificação de um botão de rádio, mas sabemos o valor.
Podemos utilizar o ID do div pai e selecionar o elemento cujo valor é 2. Depois podemos definir o atributo verificado para ser true.
document.querySelector('#radiobuttonset > [value="2"]').checked = true;
Resultado: O botão de rádio 2 é selecionado.
Em alguns casos, quando sabemos que não há outros elementos no DOM iguais ao valor predefinido, podemos selecionar o elemento apenas verificando se o valor é verdadeiro. Neste caso, não precisaremos do DOM pai.
document.querySelector('[value="3"]').checked = true;
Resultado: O botão de rádio 3 é selecionado.
Verificar o botão de rádio usando jQuery
Além de usar JavaScript, também podemos usar a biblioteca jQuery para verificar um botão de rádio baseado em um valor predefinido. jQuery é uma biblioteca, construída usando JavaScript. Ela ajuda a simplificar a travessia e manipulação do HTML DOM. A sintaxe para jQuery também é mais simples do que JavaScript.
Para adicionar o uso de jQuery, adicione uma referência à biblioteca jQuery a partir do CDN ou de um arquivo local.
Selecione o botão de rádio usando ID
Como o JavaScript, para acessar o elemento DOM utilizando o ID, utilizamos o prefixo #. Entretanto, a sintaxe exata depende da liberação do jQuery utilizado.
A versão estável atual do jQuery é a 3.4.1.
a versão de jQuery é igual ou superior (>=) 1.6
Se a versão de jQuery utilizada for maior ou igual a 1,6, utilizamos prop para definir o atributo verificado para ser verdadeiro.
$('#myradio_1').prop('checked', true);
Output: O botão de rádio 1 é selecionado.
a versão de jQuery é versões anteriores a (<) 1.6
Se a versão de jQuery for anterior a 1.6, poderemos atualizar o attr como verificado.
$('#myradio_2').attr('checked', 'checked');
Resultado: O botão de rádio 2 está selecionado
Selecione o botão de rádio usando o valor
Também podemos atualizar o valor selecionado para o botão de rádio com base no valor do botão.
$('input[name=radiobutton][value=\'1\']').prop('checked', true);
Resultado: Botão de rádio 2 é selecionado
Verifique o botão do rádio com base em um clique no botão
Quando soubermos como atualizar o botão de rádio usando JavaScript ou jQuery, podemos atualizar a seleção com base em algum evento como um clique de botão ou qualquer outro por alguma outra seleção de elementos. Para testá-lo, deixe-nos atualizar nosso formulário para adicionar um botão.
<div id='radiobuttonset'>
<input type='radio' id='myradio_1' name='radiobutton' value='1' />1
<input type='radio' id='myradio_2' name='radiobutton' value='2' />2
<input type='radio' id='myradio_3' name='radiobutton' value='3' />3
</div>
<button id="button_1">check 1</button>
Podemos então adicionar um evento click no botão. Ao clicar, ele seleciona o primeiro botão de rádio.
$('#button_1').click(function() {
$('input[name=radiobutton]').val(['1']);
});
Resultado: O botão de rádio 1 é selecionado