Como saber qual botão de rádio está selecionado via jQuery: guia completo

Por que isso é importante e como não se confundir com botões de rádio

Imagine: você está criando um formulário de contato, uma pesquisa ou configurações de perfil. Em todos os lugares onde o usuário precisa escolher uma opção entre várias, os radio buttons vêm em socorro. Mas quando se trata de processar a seleção no lado do cliente, muitos iniciantes (e até desenvolvedores experientes) tropeçam. A pergunta "How can I know which radio button is selected via jQuery?" é uma das mais populares no Stack Overflow, e não é à toa: parece simples, mas há muitas nuances.

Neste guia, vamos explorar várias maneiras de obter o valor do botão de rádio selecionado usando jQuery. Você aprenderá como evitar erros comuns, como manter o código limpo e como adaptar as soluções para diferentes cenários. Vamos lá!

Estrutura HTML básica para botões de rádio

Antes de escrever jQuery, vamos criar um formulário simples com botões de rádio. Digamos que estamos perguntando ao usuário sobre sua linguagem de programação favorita:

<form id="surveyForm">\n  <p>Sua linguagem de programação favorita:</p>\n  <label>\n    <input type="radio" name="language" value="python"> Python\n  </label>\n  <label>\n    <input type="radio" name="language" value="javascript"> JavaScript\n  </label>\n  <label>\n    <input type="radio" name="language" value="java"> Java\n  </label>\n  <br><br>\n  <button type="button" id="getResult">Saber escolha</button>\n</form>

Observe: todos os botões de rádio têm o mesmo atributo name="language". É isso que os une em um grupo — você só pode selecionar uma opção. Se tiverem nomes diferentes, serão grupos independentes.

Método nº 1: Seletor jQuery :checked — o clássico

A maneira mais direta e frequentemente usada é aplicar o seletor :checked. Ele encontra todos os elementos de formulário marcados (selecionados). Combinado com .val(), obtemos instantaneamente o valor:

$('#getResult').on('click', function() {\n  var selectedValue = $('input[name="language"]:checked').val();\n  if (selectedValue) {\n    alert('Você selecionou: ' + selectedValue);\n  } else {\n    alert('Nada foi selecionado!');\n  }\n});

O que está acontecendo aqui?

\n
• $('input[name="language"]:checked') — procuramos entre todos os inputs com o nome "language" apenas aqueles que estão marcados (com um ponto).
\n
• .val() — pegamos o atributo value do elemento encontrado.
\n
• A verificação if (selectedValue) — se nada estiver selecionado, .val() retornará undefined, e mostraremos um aviso.
\n

Este método é ideal quando você tem um grupo de botões de rádio e precisa obter o valor de um deles.

Método nº 2: Usando .filter() e .is() para flexibilidade

Às vezes, você não quer depender apenas de :checked ou precisa realizar ações adicionais com o elemento selecionado. É aí que os métodos .filter() e .is() são úteis:

$('#getResult').on('click', function() {\n  var selected = $('input[name="language"]').filter(':checked');\n  if (selected.length > 0) {\n    console.log('Elemento selecionado:', selected);\n    var value = selected.val();\n    var id = selected.attr('id');\n    alert('Valor: ' + value + ', ID: ' + (id || 'nenhum'));\n  } else {\n    alert('Por favor, selecione uma linguagem.');\n  }\n});

O método .filter(':checked') filtra apenas os elementos marcados da coleção. E .is(':checked') pode ser usado para verificar um elemento específico:

// Verificando se Python está selecionado\nif ($('input[value="python"]').is(':checked')) {\n  console.log('Python — uma excelente escolha!');\n}

Essa abordagem é útil quando você precisa não apenas obter o valor, mas também manipular