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> |
Cara usa $(‘:checkbox:checked’).length, ela ja te retorna o numero de checados. Viva o Jquery!
Obrigado Carlos, por compartilhar.
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
Lucas, obrigado pela dia.
Utilizando JQuery fica bem mais fácil.