07.01.2025

Como Obter o Valor de uma Checkbox Usando jQuery

Resposta Rápida

Para verificar o estado e recuperar o valor de uma checkbox em jQuery, você pode usar o seguinte trecho de código:

var value = $('#checkbox').is(':checked') ? $('#checkbox').val() : '';

O script primeiro verifica se a checkbox está marcada utilizando um operador ternário. Se estiver marcada, ele retorna seu valor; caso contrário, retorna uma string vazia.

Como Verificar se uma Checkbox Está Marcada

Para determinar se uma checkbox está marcada, você pode usar o código abaixo:

var isChecked = $('#checkbox').prop('checked');

A propriedade prop no contexto de 'checked' retornará true ou false, dependendo se a checkbox está selecionada.

Trabalhando com Múltiplas Checkboxes

Se você precisa gerenciar múltiplas checkboxes ao mesmo tempo, pode usar o seguinte trecho de código, que verifica de forma eficiente o estado de todas as checkboxes:

$('.checkbox-class').each(function() {
    console.log(this.id + ' ' + (this.checked ? 'marcada' : 'não marcada'));
});

Esse código exibe informações sobre se cada elemento com a classe .checkbox-class está marcada ou não.

Acompanhando Ações do Usuário

Para monitorar mudanças no estado de uma checkbox (por exemplo, quando ela é marcada ou desmarcada), você pode usar o seguinte script:

$('#checkbox').change(function() {
    alert('A checkbox está ' + (this.checked ? 'marcada' : 'não marcada'));
});

Visualização

Representações visuais podem ajudar a ilustrar a funcionalidade das checkboxes:

Checkbox marcada:    [✔️🚪] Você tem uma chave, o valor "on" pode ser recuperado.
Checkbox não marcada:  [❌🚪] Desculpe, acesso ao valor negado.

Um exemplo de verificação do estado de cada checkbox e recuperação de seu valor:

$('input[type="checkbox"]').each(function() {
    var statusPorta = $(this).is(':checked') ? '✔️🚪' : '❌🚪';
    var valorPorTrásDaPorta = $(this).val(); // Vamos ver o que há atrás da porta se estiver aberta
    console.log(statusPorta + ' Valor: ' + valorPorTrásDaPorta);
});

A saída do console ao executar esse código pode parecer com isso:

✔️🚪 Valor: on // A porta está aberta, valor "on" disponível!
❌🚪 Valor:    // A porta está fechada, nenhum valor atrás dela.

Dicas para Usuários Avançados

Coerção Criativa de Tipos

O seguinte trecho de código impressionará seus colegas:

var isCheckedNumeric = +$('#checkbox').is(':checked');

Neste caso, o operador unário plus é utilizado para converter o valor booleano em um número. Se a checkbox estiver marcada, o código retornará 1; se não estiver marcada, retornará 0.

Entendendo Nuances do DOM

É importante lembrar que as propriedades dos elementos no DOM podem mudar, enquanto os atributos sempre refletem o estado inicial no momento em que a página é carregada:

var estadoInicialMarcado = $('#checkbox')[0].hasAttribute('checked');

Esse código utiliza o método hasAttribute para verificar a existência do atributo checked no primeiro elemento da seleção.

Simplificando o Tratamento de Formulários

O seguinte script simplifica o tratamento de formulários que contêm múltiplas checkboxes:

var valoresMarcados = $('input:checkbox:checked').map(function() {
    return this.value;
}).get();

Esse código fornece uma maneira conveniente de obter um array com os valores de todas as checkboxes marcadas.

Criando Dynamicamente Checkboxes na Página

Às vezes, pode ser necessário criar checkboxes dinamicamente em uma página da web:

$('<input>', {
    type: 'checkbox',
    id: 'dynamicCheckbox',
    value: 'dynamicValue',
    checked: 'checked'
}).appendTo('body');

O exemplo acima demonstra como adicionar rápida e convenientemente uma nova checkbox ao DOM com todos os atributos necessários.

Recursos Úteis

1. .val() | Documentação da API jQuery — Uma instrução sobre como recuperar valores de checkboxes.
2. :checked Selector | Documentação da API jQuery — O seletor :checked para selecionar checkboxes marcadas na documentação jQuery.
3. Como eu marco/desmarco uma entrada de checkbox ou botão de rádio? | Centro de Aprendizado jQuery — Um FAQ útil sobre trabalho com checkboxes e botões de rádio.
4. Aprenda jQuery | Codecademy — Um curso de aprendizagem de jQuery que, se feito, fornecerá conhecimentos essenciais para seu trabalho.
5. <input type="checkbox"> - HTML: Linguagem de Marcação de Hipertexto | MDN — Um guia detalhado sobre como trabalhar com elementos checkbox em HTML.
6. javascript - Como verifico se uma checkbox está marcada em jQuery? - Stack Overflow — Uma discussão sobre trabalho com checkboxes na comunidade Stack Overflow.

Video

Navigation