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); // falsePrimeiramente 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!