25.02.2025

Determinando o Status do Botão de Rádio Selecionado em jQuery

Resposta Rápida

Para determinar se um botão de rádio está selecionado, use o método .is() em jQuery junto com a pseudo-classe :checked:

var isSelected = $('input[name="radioName"]:checked').length > 0;

Substitua "radioName" pelo nome do seu botão de rádio. Se pelo menos um botão de rádio com esse nome estiver selecionado, a variável isSelected terá o valor true; caso contrário, false.

Tratamento de Eventos e Interação com Botões

Tratando Eventos de Clique

O jQuery possui vários métodos para rastrear eventos. Um dos mais universais é .click(), que é suportado por vários navegadores, incluindo versões mais antigas do IE.

$('input[type="radio"]').click(function() {
  if ($(this).is(':checked')) {
    console.log("Botão de rádio selecionado. É hora de se divertir! 🥳");
  }
});

Respondendo a Mudanças de Estado

Aplique o evento click a outros elementos da interface, como botões, para controlar o estado dos botões de rádio e evitar o envio do formulário se a seleção obrigatória não tiver sido feita.

$('#submitBtn').on('click', function(e) {
  if (!$('input[name="radioName"]').is(':checked')) {
    alert("Por favor, selecione uma das opções primeiro.");
    e.preventDefault();
  }
});

Inicialização

Envolva seu código jQuery na função $(document).ready() para garantir que o DOM esteja completamente carregado antes de vincular manipuladores de eventos e interagir com a página.

$(document).ready(function() {
  // Seus incríveis scripts jQuery devem ir aqui.
});

Visualização

Visualize o estado de um botão de rádio em jQuery, como se você estivesse verificando se o rádio está ligado:

if ($("#radioButtonId").is(":checked")) {
    alert("📻 A música está tocando! 🎶");  // Botão de rádio selecionado — estamos sintonizados!
} else {
    alert("📻 Silêncio. 😶");                 // Botão de rádio não selecionado — sem música tocando.
}

Estado do botão de rádio:
- Selecionado:   [📻🎶]
- Não Selecionado: [📻😶]

Use o jQuery como um sintonizador para "focar" na "frequência" do seu botão de rádio.

Monitorando Atividade do Botão de Rádio

Rastreando Mudanças

Com manipuladores de eventos click ou change, você pode acompanhar o estado dos botões de rádio, como se estivesse ouvindo suas "conversas".

$('input[type="radio"][name="musicGenre"]').change(function() {
  if ($(this).is(':checked')) {
    console.log($(this).val() + " está tocando! Hora de dançar! 🕺");
  }
});

Notificações sobre Mudança de Seleção

Para melhorar a experiência do usuário, informe os usuários sobre as mudanças usando eventos e verificando os estados dos botões de rádio.

$('input[type="radio"][name="notifications"]').on('click', function() {
  if ($(this).is(':checked')) {
    alert("Agora você não vai perder notificações sobre novos vídeos com gatos barulhentos! 🐱");
  }
});

Seleção Pontual de Elementos

Você pode selecionar botões de rádio com base em vários parâmetros: classe, nome, atributos de dados. Demonstre uma abordagem profissional em sua seleção:

$('.radioClass').is(':checked');                              // Seleção por classe
$('input:radio[name="radioGroup"]').is(':checked');           // Seleção por nome
$('input[data-role="radioToggle"]').is(':checked');           // Seleção por atributo de dados

Validação Antes do Envio do Formulário

Antes de enviar o formulário, assegure-se de que todas as seleções obrigatórias foram feitas — assim como você não gostaria de um cheeseburger sem queijo.

$('#form').submit(function(e) {
  if (!$('input[type="radio"][name="agreement"]').is(':checked')) {
    alert("Por favor, concorde com os termos antes de assinar.");
    e.preventDefault();
  }
});

Recursos Úteis

1. `:checked Selector | jQuery API Documentation — Documentação oficial do jQuery sobre o seletor :checked.
2. `.prop() | jQuery API Documentation — Análise aprofundada do método .prop() no jQuery.
3. JavaScript - Como posso saber qual botão de rádio foi selecionado via jQuery? - Stack Overflow — Discussão sobre o manuseio de botões de rádio em jQuery no Stack Overflow.
4. `:radio Selector | jQuery API Documentation — Simplificando a seleção de botões de rádio com o jQuery.
5. .change event | jQuery API Documentation — Documentação sobre o evento .change().
6. Tratamento de Eventos | jQuery Learning Center — Guia para manipulação de eventos no jQuery.

Video

Navigation