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!
