Como verificar se checkox está marcada com JS e jQuery

Neste artigo você vai aprender a como verificar se checkox está marcada, utilizando JavaScript puro e também jQuery

Fala programador(a), beleza? Bora aprender mais sobre checkbox em JavaScript!

Verificar se uma checkbox está checada pode ser útil em muitas situações, como por exemplo, para ativar ou desativar alguma funcionalidade ou para enviar algum dado para o servidor.

Há duas formas de se fazer isso, utilizando JavaScript puro ou utilizando a biblioteca jQuery. Vamos ver os dois métodos a seguir.

Verificando com JavaScript puro

Para verificar se uma checkbox está checada utilizando JavaScript puro, basta selecionar o elemento e verificar o valor da propriedade checked.

Por exemplo, imagine que temos uma checkbox com o id “minha-checkbox”:

<input type="checkbox" id="minha-checkbox">

Para verificar se ela está checada, basta fazer o seguinte:

const checkbox = document.querySelector('#minha-checkbox');

if (checkbox.checked) {
  console.log('A checkbox está checada');
} else {
  console.log('A checkbox não está checada');
}

Isso já é o suficiente para verificar se a checkbox está checada.

Mas e se quisermos fazer algo quando ela for marcada ou desmarcada?

Para isso, podemos utilizar o evento change.

Ele é disparado quando o valor de um elemento é alterado. No caso da checkbox, ele é disparado quando ela é marcada ou desmarcada.

Veja o exemplo a seguir:

const checkbox = document.querySelector('#minha-checkbox');

checkbox.addEventListener('change', () => {
  if (checkbox.checked) {
    console.log('A checkbox foi marcada');
  } else {
    console.log('A checkbox foi desmarcada');
  }
});

Verificando com jQuery

A biblioteca jQuery é muito popular e oferece uma forma mais simples de se trabalhar com elementos HTML. Para verificar se uma checkbox está checada com jQuery, basta selecionar o elemento e verificar o valor do método is(':checked').

Por exemplo, imagine a mesma checkbox do exemplo anterior:

<input type="checkbox" id="minha-checkbox">

Para verificar se ela está checada, basta fazer o seguinte:

const checkbox = $('#minha-checkbox');

if (checkbox.is(':checked')) {
  console.log('A checkbox está checada');
}

Como mencionado anteriormente, basta selecionar o elemento e verificar o valor do método is(':checked').

Mas, assim como no exemplo com JavaScript puro, também é possível fazer algo quando a checkbox é marcada ou desmarcada. Para isso, podemos utilizar o evento change.

Veja o exemplo a seguir:

const checkbox = $('#minha-checkbox');

checkbox.change(() => {
  if (checkbox.is(':checked')) {
    console.log('A checkbox foi marcada');
  } else {
    console.log('A checkbox foi desmarcada');
  }
});

E é isso! Agora você já sabe como verificar se uma checkbox está checada com JavaScript puro e com jQuery.

Deixe um comentário contando o que achou deste artigo 🙂

Quer aprender mais sobre JavaScript? Confira o vídeo abaixo:

Conclusão

Neste artigo você viu como verificar se checkox está marcada, utilizando jQuery e também JavaScript

Agora é escolher a abordagem que se encaixa no seu projeto aplicar!

Está buscando a sua primeira vaga como Programador? Confira o nosso treinamento completo clicando aqui.

Uma plataforma de cursos com projetos completos, comunidade de alunos e muito mais!

Há também o nosso canal no YouTube, com muito conteúdo gratuito de qualidade!