Como verificar se um checkbox está selecionado em jQuery: guia completo com exemplos

Como verificar se um checkbox está selecionado em jQuery: tutorial passo a passo para iniciantes

Olá, amigo! Se você já trabalhou com formulários em uma página web, certamente já se deparou com a pergunta: "Este checkbox está selecionado?". Parece um detalhe, mas são justamente esses detalhes que muitas vezes deixam até desenvolvedores experientes confusos. No Stack Overflow, a pergunta "How do I check whether a checkbox is checked in jQuery?" acumulou milhares de visualizações, o que significa que o assunto é realmente quente.

Neste tutorial, não vou apenas mostrar a sintaxe seca. Vamos analisar várias maneiras, compará-las, descobrir onde estão as armadilhas e escrever um código bonito e funcional. Vamos nessa!

Por que isso é importante? (E o que o jQuery tem a ver com isso?)

Hoje, muitos estão migrando para o JavaScript puro, mas o jQuery ainda vive em milhões de projetos: desde sites antigos até painéis administrativos modernos. Saber como trabalhar com :checked e os métodos .prop() / .attr() é o básico que vai te economizar horas de depuração.

Imagine: você está criando um formulário de cadastro onde é necessário concordar com os termos. Ou uma loja online com filtros de produtos. Sem verificar o estado do checkbox, não dá para ir a lugar nenhum.

Método nº 1: O clássico — método .prop()

A maneira moderna e correta. A partir do jQuery 1.6, para atributos booleanos (checked, disabled, selected), deve-se usar .prop().

// HTML\n<input type="checkbox" id="agree"> Eu concordo com os termos\n\n// jQuery\nif ($('#agree').prop('checked')) {\n    console.log('Checkbox selecionado!');\n} else {\n    console.log('Checkbox não selecionado.');\n}

Por que isso funciona? .prop() acessa a propriedade do elemento DOM, que sempre retorna true ou false. É rápido, confiável e sem surpresas.

Método nº 2: Seletor :checked (conciso)

Quer algo ainda mais curto? Use o pseudo-seletor :checked. Ele verifica se o elemento está selecionado diretamente no seletor.

if ($('#agree:checked').length) {\n    console.log('Selecionado!');\n} else {\n    console.log('Não selecionado.');\n}

Ou de forma ainda mais elegante:

if ($('#agree').is(':checked')) {\n    console.log('Selecionado!');\n}

O método .is() retorna true se pelo menos um elemento da seleção corresponder ao seletor. Bonito e legível.

Método nº 3: O antigo .attr() — cuidado, armadilhas!

Às vezes, em tutoriais antigos, você encontrará um código assim:

// Exemplo RUIM\nif ($('#agree').attr('checked')) {\n    console.log('Selecionado');\n}

Não faça isso! .attr() lê o atributo HTML, que não muda após o clique do usuário. Ele retornará undefined ou a string "checked" apenas se o atributo estiver definido no HTML original. Ele não rastreia o estado dinâmico. Quer pegar um bug?

Exemplo prático: formulário com vários checkboxes

Vamos juntar tudo. Imagine que temos uma lista de hobbies e queremos saber quais o usuário selecionou.

<h3>Escolha seus hobbies:</h3>\n<label><input type="checkbox" class="hobby" value="coding"> Programação</label>\n<label><input type="checkbox" class="hobby" value="gaming"> Jogos</label>\n<label><input type="checkbox" class="hobby" value="reading"> Leitura</label>\n<button id="showHobbies">Mostrar selecionados</button>\n\n<script>\n$('#showHobbies').on('click', function() {\n    let selected = [];\n    $('.hobby:checked').each(function() {\n        selected.push($(this).val());\n    });\n    if (selected.length) {\n        alert('Você selecionou: ' + selected.join(', '));\n    } else {\n        alert('Nada selecionado.');\n    }\n});\n</script>

Observe: estamos usando .hobby:checked — um seletor que já filtra apenas os