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

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!