Como verificar se um checkbox está checado? (c/ JavaScript ou jQuery)

Neste artigo você aprenderá como verificar se um checkbox está checado – tanto com JavaScript puro como também utilizando a lib jQuery.

Fala programador(a), tudo bem? Vamos aprender a como identificar que um checkbox está marcado com JavaScript!

Primeiramente gostaria de apresentar para vocês a forma que podemos utilizar para checar o checkbox com JavaScript puro

É preferencial optar por ela, para não precisar de uma dependência externa para verificar este input, deixando assim seu código mais leve e também mais performático

Vamos ao exemplo:

<input type="checkbox" id="termos_de_contrato"><label for="termos_de_contrato">Afirmo que li todo o contrato</label>

Este será nosso HTML de referência, agora veja o JavaScript:

let checkbox = document.getElementById('termos_de_contrato');

if(checkbox.checked) {
    console.log("O cliente marcou o checkbox");
} else {
    console.log("O cliente não marcou o checkbox");
}

Apenas com a propriedade checked conseguimos evidenciar se o input de checkbox está marcado ou não

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Viu como é simples? Por isso gosto sempre de verificar como fazer algo de forma nativa nas linguagens, e depois procurar soluções de libs externas

Vejamos agora no jQuery:

let checkbox = $('#termos_de_contrato');

if(checkbox.is(":checked")) {
    console.log("O cliente marcou o checkbox");
} else {
    console.log("O cliente não marcou o checkbox");
}

Note que o maior ganha é a seleção do elemento, porém no jQuery a forma de fazer esta checagem é através do método is

Conclusão

Neste artigo vimos como verificar se um checkbox está checado

Utilizamos duas formas, a primeira com Vanilla JavaScript, que é a mais indicada

E posteriormente utilizamos a forma com jQuery

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

checked é propriedade, não é o atributo do HTML:

Aqui mora a pegadinha que derruba muita gente

O checked que você escreve lá no HTML é só o valor INICIAL do input

Já o checkbox.checked do JavaScript é o estado de agora, aquele que o usuário acabou de mudar no clique

<input type="checkbox" id="newsletter" checked>

let checkbox = document.getElementById('newsletter')

console.log(checkbox.checked) // estado atual, muda conforme o usuário clica
console.log(checkbox.defaultChecked) // o que veio marcado no HTML
console.log(checkbox.getAttribute('checked')) // continua olhando pro HTML, não pro estado

Tome cuidado! Se tu ler o atributo no lugar da propriedade, o código funciona no primeiro carregamento e depois começa a te enganar em silêncio

Já me ferrei uma vez por causa disso 😅

Como saber na hora em que o checkbox é marcado? (evento change)

Verificar dentro do clique de um botão resolve

Mas na maioria das telas tu quer reagir NA HORA, tipo liberar o botão de continuar só quando o cara aceita o contrato

Pra isso a gente escuta o evento change

let checkbox = document.getElementById('termos_de_contrato')
let botao = document.getElementById('btn_continuar')

checkbox.addEventListener('change', function () {
botao.disabled = !checkbox.checked
})

Repara numa coisa massa: dentro do evento a leitura continua sendo a mesma de sempre, o checked

O evento só diz QUANDO olhar, quem responde se está marcado segue sendo a propriedade

Como verificar vários checkboxes de uma vez?

Esse é o caso mais comum de formulário: uma lista de opções com o mesmo name e você quer saber quais foram marcadas

<input type="checkbox" name="linguagens" value="js"> JavaScript
<input type="checkbox" name="linguagens" value="php"> PHP
<input type="checkbox" name="linguagens" value="python"> Python

Com JavaScript puro dá pra pedir direto só os marcados, usando o seletor :checked

let valores = Array.from(marcados).map(function (input) {
return input.value
})

console.log(valores)

E pra saber se PELO MENOS um foi marcado

No jQuery a ideia é a mesma, muda só a seleção

return this.value
}).get()

Se liga que aqui o value só faz sentido depois de confirmar o checked, um checkbox desmarcado continua tendo value

Como marcar ou desmarcar um checkbox por código?

A mesma propriedade que lê também escreve, beleza?

let checkbox = document.getElementById('termos_de_contrato')

checkbox.checked = true  // marca
checkbox.checked = false // desmarca
checkbox.checked = !checkbox.checked // inverte o estado

E o clássico "marcar todos"

input.checked = true
})

Um detalhe que pega gente experiente: mexer no checked por código NÃO dispara o evento change

Então se tu tem uma lógica pendurada no change, chama ela na mão depois de marcar

is(‘:checked’) ou prop(‘checked’)?

No jQuery existe mais de um caminho pra mesma resposta

let checkbox = $('#termos_de_contrato')

checkbox.is(':checked')    // true ou false
checkbox.prop('checked')   // true ou false

Os dois leem o estado atual, o is responde pensando em seleção e o prop devolve a propriedade do elemento cru

Agora, se tu esbarrar num código antigo usando attr('checked'), desconfia

Vale o mesmo papo do JavaScript puro: atributo fala do HTML inicial, propriedade fala do que o usuário fez agora

Ainda vale usar jQuery só pra isso?

O critério que eu uso é simples

Se o projeto JÁ carrega jQuery, usa o is(':checked') e segue a vida, não tem crime nenhum

Agora, se o projeto não tem a lib, não vale a pena puxar uma dependência inteira pra ler um checked

Os seletores nativos (getElementById, querySelector, querySelectorAll) resolvem tudo que a gente viu aqui, incluindo o :checked em lista

É como chamar um caminhão pra levar uma caixa de sapato, funciona, mas não é o que você quer

Primeiro nativo, depois lib: essa ordem raramente decepciona =)

Perguntas frequentes:

Como verificar se um checkbox está marcado sem jQuery?

Pegue o elemento e leia a propriedade checked, ela devolve true quando está marcado e false quando não está

if (document.getElementById('termos_de_contrato').checked) {
console.log('marcado')
}

Por que meu checkbox.checked parece estar sempre errado?

Na maioria das vezes é porque o código está lendo getAttribute('checked') ou attr('checked'), que olham pro HTML inicial, e não pro estado atual do input

Como pegar o valor do checkbox marcado?

Confirme o checked primeiro e só depois leia o value, porque o value existe mesmo com o input desmarcado

Como saber se pelo menos um checkbox de um grupo foi marcado?

Selecione o grupo com :checked e confira o tamanho do resultado

Marcar o checkbox por código dispara o evento change?

Não, alterar checkbox.checked no JavaScript não dispara o change, a lógica que depende dele precisa ser chamada na mão