Verificar a quantidade de checkbox selecionados

Neste artigo você vai aprender a verificar a quantidade de checkbox selecionados, de uma forma simples, utilizando JavaScript puro

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre como verificar os checkboxes selecionados com JS!

Primeiramente vamos selecionar todos os checkboxes do nosso HTML ou os que queremos verificar se estão selecionados

Depois precisamos apenas verificar se o atributo checked é true, aí saberemos se o checkbox está ou não selecionado

Veja o código de exemplo:

var checkBoxes = document.querySelectorAll(".checkbox");
var selecionados = 0;
checkBoxes.forEach(function(el) {
    
  if(el.checked) {
  	selecionados++;
  }
  
});
console.log(selecionados);

Realizamos o forEach porque poderemos ter mais de um checkbox, então na variável checkBoxes estamos esperando uma Node List

Vamos adicionando o valor de 1 a variável selecionados a cada checbox que identificamos estar marcado

Depois imprimimos este valor, exibindo quantos são os checkboxes que foram marcados pelo usuário

E desta maneira resolvemos o nosso prolema, identificando cada um dos inputs marcados

Conclusão

Neste artigo vimos como verificar a quantidade de checkbox selecionados

Apenas precisamos selecionar todos os elementos que queremos verificar, no artigo utilizamos o método querySelectorAll

Depois criamos uma estrutura de loop que vai checar cada um dos inputs selecionados, verificando qual está selecionado e qual não está

Adicionamos os que estão em uma variável, para podermos contar o total dos elementos marcados e aí decidirmos o que faremos com esta informação no nosso software

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube