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

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