JavaScript: Contando Checkbox Selecionados (1)


Neste post você irá aprender, através de javascript, a contar o checkbox selecionados.

Explicando o código:

– função contaCheckbox obtém todos os inputs (checkbox) em forma de array e atribui a variável inputs.
– dentro do for foram utilizados alguns if para filtrar a nossa busca; lembrando que queremos contar os checkbox selecionados.
– o primeiro if verifica se os inputs são do tipo checkbox, pode ser aplicado aos demais inputs.
– o segundo if verifica se o checkbox está selecionado e id é igual a “check”; o id é utilizado aqui para diferenciar de outros checkbox, quero dizer, se você tem vários checkbox, no mesmo formulário, separados por assunto.
selecionados++ é o incrementador; quando passar por esta linha acrescentamos ao total de selecionados o valor de 1.

Este post está dividido em 3 partes, na segunda parte, acrescentaremos alguns códigos para pegarmos o retorno da função e ao clicar num botão será exibido um alerta com a quantidade de checbox selecionados; a terceira parte, será disponibilizado o código completo e o resultado final para testar online.

<html>
<head>
<title>Contando Checkbox</title>
<script language="JavaScript">
<!-- ***** funcao javascript ***** -->
function contaCheckbox(selecionados){
  var inputs, x, selecionados=0;
  inputs = document.getElementsByTagName('input');
  for(x=0;x<inputs.length;x++){
    if(inputs[x].type=='checkbox'){
      if(inputs[x].checked==true && inputs[x].id == 'check'){
        selecionados++;
      }
    }
  }
  return selecionados;
}
</script>
</head>
<body>
<!-- ***** html - formulario ***** -->
<form>
<table>
<tr>
  <td>
   <input type="checkbox" value="valor 1" id="check"> Checkbox 1<br /> 
   <input type="checkbox" value="valor 2" id="check"> Checkbox 2<br /> 
   <input type="checkbox" value="valor 3" id="check"> Checkbox 3<br />
   <input type="checkbox" value="valor 4" id="check"> Checkbox 4<br />
   <input type="checkbox" value="valor 5" id="check"> Checkbox 5<br /> 
   <input type="checkbox" value="valor 6" id="check"> Checkbox 6<br /> 
   <input type="checkbox" value="valor 7" id="check"> Checkbox 7
  </td>
</tr>
</table>
</form>
</body>
</html>

4 comentários em “JavaScript: Contando Checkbox Selecionados (1)

  • 2 de novembro de 2012 em 15:55
    Permalink

    Cara usa $(‘:checkbox:checked’).length, ela ja te retorna o numero de checados. Viva o Jquery!

    Resposta
  • 7 de agosto de 2013 em 1:33
    Permalink

    Funcionou certinho! Mas no final das contas, acabei fazendo meu próprio código, mais simples:

    function checkboxesCount() {
    var total_checked = $(“input[type=checkbox]:checked”).length;
    console.log( total_checked );
    }

    Neste meu caso, eu apenas conto quantos checkboxes estão marcados. =D
    Valeu

    Resposta
    • 7 de agosto de 2013 em 9:28
      Permalink

      Lucas, obrigado pela dia.

      Utilizando JQuery fica bem mais fácil.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *