15.02.2025

Manipulando Eventos de Mudança de Botões de Rádio em JavaScript

Resumo Rápido

Para rastrear o estado de mudança de um grupo de botões de rádio, utilize uma combinação do método querySelectorAll e addEventListener para configurar um manipulador de eventos de change. Aqui está um exemplo de implementação:

document.querySelectorAll('input[type="radio"][name="grupoNome"]').forEach(radio => {
    radio.addEventListener('change', () => console.log(radio.value));
});

Pontos-Chave:

• querySelectorAll seleciona todos os botões de rádio no grupo.
• forEach define um manipulador de eventos para o evento change para cada elemento no grupo.
• addEventListener monitora as mudanças no estado dos botões de rádio.
• console.log(radio.value) exibe o valor do botão selecionado. Você pode substituir isso por uma funcionalidade que atenda melhor às suas necessidades.

Rastreio Eficiente de Estado

Para um controle rápido e eficiente sobre o estado dos botões de rádio, é recomendável manter o rastreamento do último botão selecionado. Já temos uma variável para isso:

let escolhaAnterior; // Quem foi escolhido na última vez?

document.querySelectorAll('input[type="radio"][name="grupoNome"]').forEach((botão) => {
    botão.addEventListener('change', function() {
        if (this.checked) {
            // Curioso se tínhamos outro botão selecionado antes?
            console.log(`Escolha anterior: ${escolhaAnterior || "nenhum"}; Escolha atual: ${this.value}`);
            escolhaAnterior = this.value; // E aqui está a nova escolha!
        }
    });
});

Agrupando Botões de Rádio com Formulários

Agrupar logicamente os botões de rádio dentro de uma tag <form> em HTML não apenas melhora a interação do usuário, mas também simplifica a integração com o servidor, proporcionando uma estrutura clara para os dados transmitidos.

Suporte à Interação com o Teclado

Dado que muitos usuários preferem usar o teclado em vez do mouse, é importante garantir que o evento change seja ativado corretamente ao alternar botões usando as teclas do teclado. Uma verificação adicional para o evento click garantirá isso.

Visualização

Vamos representar os botões de rádio como atores:

Palco 🎭
[🔘] Ator 1
[🔳] Ator 2
[🔳] Ator 3

O evento OnChange correlaciona-se com os aplausos da plateia quando um novo ator entra no palco:

Ator 1: [🔘^ (aplausos 👏)] [🔳] [🔳]
Ator 2: [🔳] [🔘^ (aplausos 👏)] [🔳]
Ator 3: [🔳] [🔳] [🔘^ (aplausos 👏)]

Quando um ator retorna ao palco, não há aplausos:

[🔘^] Ator 1 reaparece
Estado do Evento: 🚫 (sem aplausos 👏, este ator já foi lembrado!)

Tratamento de Eventos em Diferentes Navegadores

Apesar da tendência à padronização no desenvolvimento web, os navegadores às vezes interpretam os padrões de maneira diferente, levando a variações no tratamento de eventos. Portanto, é sempre essencial realizar testes em diferentes navegadores.

Acessibilidade para Todos os Usuários

Garantir alta acessibilidade para sua aplicação é uma prática recomendada no desenvolvimento. Ao usar atributos ARIA, você pode tornar os botões de rádio acessíveis para usuários com deficiência.

A Palavra-chave 'this' em Manipuladores de Evento

Os manipuladores de evento atuam como observadores de tudo o que acontece na aplicação. No entanto, a palavra-chave 'this' age como um tipo de "ferramenta de espionagem", fornecendo informações detalhadas sobre o evento que está ocorrendo.

Recursos Úteis

1. HTMLElement: evento change - Web APIs | MDN – Informações abrangentes sobre o evento change.
2. Evento onchange — Um guia prático para trabalhar com formulários HTML interativos.
3. Borbulhamento e captura — Um guia claro sobre a mecânica de propagação de eventos.
4. evento change | Documentação da API jQuery — Se você estiver trabalhando com jQuery, é útil consultar a documentação oficial para o método .change().
5. Eventos - change — Uma análise detalhada das diferenças no comportamento entre diferentes navegadores ao lidar com eventos de mudança.
6. WebAIM: Criando Formulários Acessíveis - Controles de Formulários Acessíveis — Tornando os formulários acessíveis para todos sem exceção.

Video

Navigation