Como verificar se um checkbox está marcado ou selecionado com JavaScript e jQuery

Frequentemente precisamos conferir se um checkbox está marcado ou não para tomar decisões com o JavaScript e jQuery.

No entanto, verificar o atributo checked não é um caminho que vá funcionar aqui. Como essa é uma dúvida muito frequênte e foi um algo de pesquisa minha algumas vezes, resolvi destrinchar aqui como você pode verificar se um checkbox está marcado ou selecionado utilizando JavaScript e jQuery.

Várias maneiras de verificar o checkbox

Como tudo na programação, temos inúmeras maneiras de verificar se o checkbox está marcado. Por isso vou dar alguns exemplos abaixo.

O HTML:

<input type="checkbox" id="estaSelecionado"/>
<div id="confirmacao" style="display:none">O checkbox está selecionado</div>

No HTML temos um <input> to tipo checkbox e com uma ID. Abaixo adicionei uma <div> com um CSS que o esconde e uma ID também.

O objetivo aqui é fazer esse <div> aparecer quando eu selecionar o checkbox.

Estou presumindo que você já possui o jQuery carregado no seu documento.

O JavaScript:

Algo bacana do elemento do DOM checkbox é que ele vai te dar o estado checked do elemento quando houver uma ação nele. Isto é, ele vai te informar quando o checkbox for marcado.

Uma forma simples de executarmos essa ação é utilizando a propriedade toggle do jQuery juntamente com o estado checked.

$('#estaSelecionado').click(function() {
    $("#confirmacao").toggle(this.checked);
});

Nesse código estamos aproveitando o seletor de ID do jQuery e “ouvindo” pela ação de click no checkbox.

Quando o usuário clica para marcá-lo, chamamos a propriedade toggle do jQuery e a condicionamos pelo estado de checked do próprio elemento clicado.

O toggle no jQuery identifica que o elemento está escondido e o faz aparecer. E ao remover a seleção do checkbox o clicando novamente ele vai executar a ação contrária e o fazer esconder.

Essa é uma maneira bem resumida de fazer, no entando podemos também destrinchar e aumentar nosso código para ficar mais claro da seguinte forma:

if($("#estaSelecionado").is(':checked')){
    $("#confirmacao").show();
} else {
    $("#confirmacao").hide();
}

Nesse código estamos aproveitando da função is() do jQuery para compreender o estado do checkbox. Essa função retorna verdadeiro ou falso e nos dá a possibilidade de a usar numa condicional if.

A ação de esconder e aparecer, por sua vez, é bem padrão utilizando as funções show() e hide() do jQuery.

Conclusão

Reforço que existem essas e outras maneiras para determinar se um checkbox está marcado ou selecionado utilizando JavaScript e jQuery. Esses exemplos acima funcionam muito bem para várias situações e espero que você possa ter sucesso com seu projeto os utilizando.

Divirta-se!

Gostou do artigo?

Share on facebook
Facebook
Share on linkedin
LinkedIn
Share on pinterest
Pinterest
Share on whatsapp
WhatsApp
André Lug

André Lug

Apaixonado por design e desenvolvimento de websites. De vez em quando gosta de escrever sobre produtividade, como é ser um freelancer e algumas reflexões da vida.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *

Gostou?

Junte-se às mais de 2 mil pessoas que acompanham as novidades no mundo do design e desenvolvimento web!