16.04.2025

Troca Programática de Botões de Rádio em JavaScript Sem jQuery

Resposta Rápida

Não sabe como desmarcar um botão de rádio? Simplesmente clique duas vezes nele. Você pode implementar isso programaticamente usando JavaScript e um manipulador de eventos onClick. Ele monitorará se o último botão ativo foi clicado novamente e, se sim, irá desmarcá-lo.

let prevRadio, lastClicked;

document.addEventListener('click', function(e) {
  if (e.target.type === 'radio') {
    if (e.target === prevRadio) {
      e.target.checked = false;
      lastClicked = null;
    } else {
      lastClicked = e.target;
    }
  }
});

Insira este script no seu código HTML após a marcação do botão de rádio para manter essa funcionalidade.

Compreendendo o Tratamento de Cliques

Manipular eventos de clique em JavaScript é crucial ao adicionar a funcionalidade descrita. Vamos discutir algumas nuances que você precisa considerar ao implementar este recurso.

Artista de Rua: Trabalhando com Elementos Dinâmicos

Gerenciar elementos dinâmicos no DOM requer o uso de certos métodos. A delegação de eventos em JavaScript pode ajudar nesse aspecto, pois seu conceito é semelhante ao trabalho de um segurança.

document.addEventListener('click', function(e) {
  if (e.target.matches('input[type="radio"]')) {
    // Execute a lógica de delegação de eventos aqui
  }
});

Pianista: Utilizando as Teclas Ctrl e Cmd

Usar as teclas Ctrl e Cmd enquanto trabalha com botões de rádio é como tocar piano com ambas as mãos. Vamos aproveitar todas as ferramentas disponíveis.

document.addEventListener('click', function(e) {
  if (e.ctrlKey || e.metaKey) {
    // Implemente uma interação do usuário aprimorada aqui
  }
});

Árvore Genealógica: Estabelecendo Conexões Entre Elementos do Formulário

A relação entre um botão de rádio e um formulário pode ser comparada à história de amor de Romeu e Julieta. O método .closest() vem ao seu socorro.

let radio = e.target;
let form = radio.closest('form'); // Hora de conhecer os "parentes"

Reflexo: Garantindo Acessibilidade

Não se esqueça de enfatizar o evento 'change' quando a propriedade 'checked' mudar para evitar a execução imprevisível do código.

e.target.checked = false; 
e.target.dispatchEvent(new Event('change')); // Evite surpresas inesperadas

Opção Ideal: Oferecendo a "Nenhuma Resposta"

Em alguns casos, a melhor solução é adicionar uma opção "nenhuma resposta", implicando a inclusão de um elemento de seleção apropriado:

<label><input type="radio" name="option" value=""> Prefiro não responder </label>

Visualização

Para entender melhor como os botões de rádio funcionam em HTML, você pode pensá-los como um interruptor de luz:

Ação	Estado da Lâmpada
Clique no interruptor 🔼	Luz Acesa 💡
Clique Duplo 🔽	Luz Apagada 💡

A essência da ideia é que o botão pode ser desligado usando a mesma ação que o ligou.

// Clique ocorreu em outro botão
document.querySelector('input[type="radio"]').checked = false;

Mudamos o estado de desligado para ligado e vice-versa.

Antes: (🔘 LIGADO)

Depois: (⚪️ DESLIGADO)

Solucionando Problemas

Lembranças: Utilizando Atributos de Dados

Ao escrever código, a memória desempenha um papel crucial. Use-a sabiamente a seu favor utilizando atributos de dados para rastrear estados.

document.addEventListener('click', function(e) {
  // Lógica para verificar e mudar estado
});

Lobo Solitário: Manipulação Individual de Botões de Rádio

Cuide da lógica única para cada botão de rádio como se fosse o único à sua disposição.

$('input[type="radio"]').each(function() {
  // Lógica individual descrita aqui
});

Ameba: Ajustando Grupos Dinâmicos de Botões de Rádio

Como uma ameba, seções dinâmicas de código requerem flexibilidade e precisão. Domine a habilidade de excluir o botão ativo do grupo—isso é verdadeira maestria.

$('input[name="group"]').not(':checked').prop('checked', true);

Tapete Mágico: Aplicando Teclas de Atalho

No mundo da programação, às vezes um pouco de magia pode ser adicionada à interação da interface através de teclas de atalho.

document.addEventListener('keydown', function(e) {
  if (e.code === 'Space') {
    // Interações especiais acontecem aqui
  }
});

Recursos Úteis

1. Como definir a opção de rádio como marcada ao carregar com jQuery - Stack Overflow — Este recurso ensinará como gerenciar o estado dos botões de rádio usando JavaScript.
2. <input type="radio"> - HTML: Linguagem de Marcação HiperTexto | MDN — Esta página descreve todas as capacidades e propriedades do elemento de botão de rádio em HTML.
3. Como Criar uma Caixa de Seleção e Botões de Rádio Personalizados — Este guia ajudará você a estilizar botões de rádio para destacá-los.
4. O "Hack do Checkbox" (e coisas que você pode fazer com isso) | CSS-Tricks — Aprenda a usar criativamente caixas de seleção e botões de rádio com CSS.
5. HTML DOM Input Radio Object — Descubra as possibilidades de gerenciamento de botões de rádio via DOM em JavaScript.
6. Guia de Práticas de Autoria ARIA | APG | WAI | W3C — Aprenda como criar botões de rádio acessíveis para que seu código seja compreensível por todos os usuários.
7. Propriedades e métodos de Formulário — Um entendimento profundo de como trabalhar com formulários em JavaScript é fornecido neste guia detalhado.

Video

Navigation