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!

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

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