-2

Possuo uma div no html que vai receber uma série de checkboxes para seleção de um intervalo de datas. Essa div se encontra dentro de um accordion para exibição amigável ao usuário. A criação dos checkboxes estão sendo realizados normalmente conforme o laço for abaixo:

for (let index = anteriores[1]; index <= anteriores[ultimoano]; index++) {
    abre = `<div class="form-check">`;
    checkbox = `<input class="form-check-input" type="checkbox" value="" id="dectervenc${index}">`;
    label = `<label class="form-check-label" for="dectervenc${index}">${index} - 12/12 avos</label>`;
    fecha = `</div>`;
    bodyAccordion.innerHTML += abre + checkbox + label + fecha;

    controle.push(document.getElementById(`dectervenc${index}`));
};

A última linha do for, realiza um push, uma forma que encontrei para conseguir ler quais estão sendo marcados com checked, porém, ao tentar realizar a leitura, mesmo fazendo a seleção, todos retornam como false e apenas o último criado no array é lido.

Não sei se é algo relacionado a forma de realizar o push para leitura das seleções ou se é algo na leitura em si dos elementos pelo id.

Após a leitura, preciso contar apenas os checkboxes selecionados para tratamento posterior.

O código para leitura é o utilizado abaixo:

let contagem = 0;
for (let index = 0; index < controle.length; index++) {
    if (controle[index].checked) {
       contagem++
    };
};
console.log(contagem);

Essa leitura é realizada após clicar em um botão de cálculo, onde preciso verificar quais estão sendo selecionados para aplicar um cálculo sobre a quantidade de checkboxes selecionados.

Se puderem ajudar agradeço Não consigo entender a causa de sempre retornarem como false na seleção, se tiverem sugestão de melhoria na questão da leitura das seleções também agradeço.

3
  • 1
    Não seria mais fácil ao invés contar, poder consultar quais dos checkboxes estão selecionados com isso aqui e do resultado apenas ler a propriedade length? Commented 28/06 às 23:29
  • Boa @AugustoVasques, muito obrigado Deixei passar batido essa opção, valeu mesmo, obrigado
    – Cardoso
    Commented 28/06 às 23:47
  • Relacionado(possivelmente duplicado depois da resposta que vi): Saber quantidade de checkbox selecionados Commented 29/06 às 0:16

1 Resposta 1

1

Ao invés contar os checkboxes selecionados dentro um laço for, você poder consultar quais dos checkboxes estão selecionados com Document.querySelectorAll() que retorna uma NodeList de elementos presentes no documento que coincidam com o grupo de seletores especificado.

No caso a NodeList retornada irá conter todos os elementos do documento que coincidam com o seletor input[type="checkbox"]:checked para encontrar os checkboxes selecionados, e então leia a propriedade NodeList.length para saber sua contagem.

Obs: fiz algumas alterações no código:

  • Acrescentei suporte ao bootstrap e suporte jquery para visualização do exemplo.
  • Determinei um número de apenas cinco checkboxes para resumir a visualização.
  • Removi as variáveis cujo o leitor da pergunta não tem referência(assim transformando o exemplo num Exemplo Mínimo Verificavel).
  • Removi algumas Strings imutáveis ao logo do ciclo de vida do exemplo para for do laço for pois não precisam ser recriadas a cada laço.
  • Criei um botão HTML para ao ser pressionado chamar a função fContagem()
  • Criei a função fContagem() que consulta e imprime no console o número de checkboxes selecionados.

const abre = `<div class="form-check">`;
const fecha = `</div>`;
for (let index = 1; index <= 5; index++) {
  let checkbox = `<input class="form-check-input" type="checkbox" value="" id="dectervenc${index}">`;
  let label = `<label class="form-check-label" for="dectervenc${index}">${index}/12 avos</label>`;
  document.body.innerHTML += abre + checkbox + label + fecha;
};

function fContar() {
  //Consulta quais os checkboxes selecionados no documento.
  const selecionados = document.querySelectorAll('input[type="checkbox"]:checked');
  //imprime a contagem de checkboxes selecionados.
  console.log(`Foram selecionado ${selecionados.length} checkboxes`);
}
<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
</head>

<body>
  <button onclick="fContar()">Contar</button>
</body>

</html>

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .