Verificar se um checkbox está marcado com JavaScript

Neste artigo você vai aprender a verificar se um checkbox está marcado com JavaScript puro, de uma maneira super simples!

Fala programador(a), beleza? Bora aprender mais sobre DOM e também sobre a linguagem JavaScript!

Para verificar se um elemento está checado/marcado vamos precisar selecioná-lo via DOM antes

Podemos utilizar diversos métodos para isso:

• querySelector;
• getElementByClassName;
• getElementById;

São alguns exemplos de métodos de seleção de elementos, neste caso vamos utilizar o querySelector

Após a seleção devemos acessar a propriedade checked, isso faz com que um booleano seja retornado para nós

Formação Recomendada

Formação Claude Code

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

• 116 aulas
• 4 projetos
• 9h 23min

Conhecer formação

As respostas possíveis são: true or false

Ou seja, se estiver checado vamos receber true e se não false!

Veja um exemplo prático do que foi explicado acima:

<input type="checkbox" id="meu-checkbox" checked="checked"> Este está marcado
<input type="checkbox" id="meu-checkbox-dois"> Este não

Aqui criamos dois checkboxes primeiramente, um ativo e o outro não

Podemos deixar um checkbox ativo por padrão utilizando o atributo checked=”checked”

Agora veja o código JS necessário para a validação:

var checkboxUm = document.querySelector("#meu-checkbox");

var checkboxDois = document.querySelector("#meu-checkbox-dois");

console.log(checkboxUm.checked); // true

console.log(checkboxDois.checked); // false

Primeiramente selecionamos os dois checkboxes, baseado no id de cada um

E por fim realizamos a validação, no primeiro caso recebemos true, pois o checkbox está marcado

Já no segundo false, pois o mesmo não está marcado

Conclusão

Neste artigo você aprendeu a como verificar se um checkbox está marcado com JavaScript puro

Utilizamos o método querySelector para selecionar os elementos de checkbox

Depois foi feita a validação, se o elemento está marcado ou não, via a propriedade checked

Com ela recebemos true, se o elemento estiver macardo, e false, se o elemento não estiver marcado

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!

Bloco novo mostrando como reagir quando o usuário marca ou desmarca em tempo real, não só na hora que a página carrega. A ideia: seleciona o checkbox, escuta o evento de mudança e lê a propriedade checked dentro dele. Algo assim:

var checkbox = document.querySelector("#meu-checkbox");

checkbox.addEventListener("change", function() { if (checkbox.checked) { console.log("marcou!"); } else { console.log("desmarcou!"); } });

Explica o porquê antes: só ler o checked uma vez pega o estado daquele instante, mas na vida real tu quer saber toda vez que o usuário mexe

Aí o addEventListener resolve, ele fica de olho e roda a validação a cada troca

Bora ver na prática? Marca e desmarca e acompanha o console 🙂

Um bloco curtinho respondendo direto a dúvida que aparece na busca

A propriedade .checked é um booleano do próprio elemento de checkbox no DOM

Ela não é um método, tu não chama com parênteses, é só acessar: elemento.checked

Se o checkbox está marcado ela vale true, se não vale false, simples assim

Serve pra checkbox e pra radio button também, beleza?

Mostrar a mesma validação usando getElementById, já que ele cita o método mas só demonstra querySelector

var checkbox = document.getElementById("meu-checkbox");

console.log(checkbox.checked); // true ou false

Repara que muda só a forma de selecionar, a leitura do .checked é idêntica

Se tu já conhece o querySelector, aqui é a mesma lógica por outro caminho