29.03.2025

Recuperando Valores de Checkboxes Selecionados por Classe em jQuery

Resposta Rápida

Para obter um array de valores de todos os checkboxes selecionados com uma classe específica, utilize o método .map() do jQuery em conjunto com o seletor :checked:

// Cria um array de valores a partir dos checkboxes selecionados
var valoresSelecionados = $('.sua-classe-checkbox:checked').map((_, el) => el.value).get();

Substitua .sua-classe-checkbox pela classe adequada dos seus elementos. O array valoresSelecionados conterá os valores necessários.

Técnicas Avançadas e Desafios Potenciais

O Método .each(): Quando Processamento Detalhado é Necessário

O método .map() é adequado para muitos casos, mas se você precisar de mais controle ou operações adicionais durante a iteração, utilize o método .each():

// Cria um array e preenche com valores dos checkboxes selecionados
var valoresSelecionados = [];
$('.sua-classe-checkbox:checked').each(function() {
  valoresSelecionados.push(this.value);
});

Lidando com Checkboxes Sem Valores

Se seus checkboxes não possuem um atributo value, atribua a eles um valor padrão assim:

// Cria um array e preenche com valores dos checkboxes selecionados ou um valor padrão
var valoresSelecionados = $('.sua-classe-checkbox:checked').map((_, el) => $(el).val() || 'padrão').get();

Adaptando-se a Elementos Dinâmicos: Manipulação de Evento Deferido

Para checkboxes adicionados dinamicamente, você precisa delegar a manipulação de eventos para capturar mudanças:

// Adiciona um manipulador de evento ao documento para capturar mudanças
$(document).on('change', '.sua-classe-checkbox', function() {
  // Lida com novos checkboxes
});

Visualização

Para demonstrar visualmente como trabalhar com um grupo de checkboxes com uma classe específica, vamos usar o seguinte exemplo:

// Obtém um array de checkboxes selecionados
$('.classe-checkbox:checked').toArray();

Representação HTML dos checkboxes:

[🪖🗹, 🪖, 🪖🗹, 🧝‍♀️, 🧝‍♀️🗹, 🐉]

Resultado processado:

Checkboxes selecionados: [🪖🗹, 🪖🗹, 🧝‍♀️🗹]

Assim, o jQuery filtrou todos os checkboxes selecionados deste conjunto.

Análise Detalhada: Condições Especiais e Otimização de Desempenho

Trabalhando com Formulários Grandes

Ao processar formulários grandes, é importante considerar a otimização de desempenho:

// Cria um array de checkboxes selecionados com otimização
var $checkboxes = $('.sua-classe-checkbox');
var valoresSelecionados = $checkboxes.filter(':checked').map((_, el) => el.value).get();

Chamadas Encadeadas: Eficiência vs. Desempenho

Chamadas encadeadas em jQuery podem parecer atraentes, mas podem prejudicar o desempenho:

// Cria um array de checkboxes selecionados usando chamadas encadeadas
var valoresSelecionados = $('.sua-classe-checkbox').filter(':checked').map((_, el) => el.value).get();

Ajuda do Underscore.js

Utilizar bibliotecas auxiliares como underscore.js pode simplificar a resolução de problemas:

// Cria um array de checkboxes selecionados usando underscore.js
var valoresSelecionados = _.map($('.sua-classe-checkbox:checked'), (el) => el.value);

Recursos Úteis

1. ':checked Seletor | Documentação da API jQuery' – Aprenda a selecionar checkboxes marcados em nível profissional.
2. '.each() | Documentação da API jQuery' – Domine a arte de iterar sobre arrays ou objetos no jQuery.
3. 'Selecionando Elementos | Centro de Aprendizado jQuery' – Explore formas de selecionar elementos no jQuery.
4. '.map() | Documentação da API jQuery' – Amplie suas habilidades relacionadas à transformação de arrays.
5. '.val() | Documentação da API jQuery' – Aprenda a obter e definir valores de formulários.
6. 'Array.prototype.map() - JavaScript | MDN' – Aprofunde-se no tópico do método built-in .map() em JavaScript.

Video

Navigation