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>
Related posts:
