Como verificar um botão de rádio usando JavaScript ou jQuery

Para selecionar um botão de rádio, defina sua propriedade checked como true. Use JavaScript para localizar o campo pelo id ou pelo value; com jQuery, faça o mesmo usando .prop('checked', true). Os botões de rádio de um grupo compartilham o mesmo name, portanto, marcar um campo seleciona essa opção no grupo.

Este formulário fornece os IDs, o nome do grupo e os valores usados a seguir:

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>

Selecionar um botão de rádio com JavaScript

Se você souber o ID, document.querySelector('#myradio_1').checked = true seleciona o primeiro campo. O # indica um seletor de ID, e .checked representa o estado atual da seleção.

Para selecionar pelo valor neste formulário, use document.querySelector('#preferences input[name="radiobutton"][value="2"]').checked = true. Restringir o seletor ao formulário e ao grupo de botões de rádio evita corresponder a outro campo da página. Um seletor de valor sem esse escopo só é adequado quando esse valor é único entre os campos correspondentes do documento.

A ilustração JavaScript independente a seguir representa o estado marcado sem usar o DOM de um navegador. Os seletores específicos do navegador acima usam a API real do DOM.

Execute este exemplo:

const radios = [
  { id: "myradio_1", value: "1", checked: false },
  { id: "myradio_2", value: "2", checked: false },
  { id: "myradio_3", value: "3", checked: false }
];

const chosenRadio = radios.find((radio) => radio.id === "myradio_1");
chosenRadio.checked = true;
console.log(radios.find((radio) => radio.checked).value);

1

Selecionar um botão de rádio com jQuery

Carregue o jQuery antes de executar estas chamadas. Para um campo cujo ID você conhece, use $('#myradio_1').prop('checked', true). Para selecionar pelo valor, restrinja o seletor ao formulário: $('#preferences input[name="radiobutton"][value="2"]').prop('checked', true). O método .prop() define o estado atual de seleção; o valor de um atributo HTML antigo não representa de forma confiável as alterações posteriores feitas pelo usuário.

Selecionar um botão de rádio ao clicar em um botão

Adicione um botão e trate o clique com JavaScript. Se o botão estiver fora do formulário, use type="button" para evitar que ele envie o formulário. Nesta ilustração completa de uma página no navegador, clicar no botão seleciona a opção de rádio cujo rótulo é “Option 1”. O texto visível do botão é “Select Option 1”; os dois rótulos permanecem em inglês no exemplo inalterado. Trata-se de código-fonte estático, sem resultado de execução declarado.

<form id="preferences">
  <label><input type="radio" id="myradio_1" name="radiobutton" value="1"> Option 1</label>
  <label><input type="radio" id="myradio_2" name="radiobutton" value="2"> Option 2</label>
  <label><input type="radio" id="myradio_3" name="radiobutton" value="3"> Option 3</label>
</form>
<button id="button_1" type="button">Select Option 1</button>
<script>
  document.querySelector('#button_1').addEventListener('click', () => {
    document.querySelector('#preferences input[value="1"]').checked = true;
  });
</script>