Linha de comando.com - Tecnologia, Informação, Dicas e muito mais. » for

JavaScript: Contando Checkbox Selecionados (3)

Tiago — Fri, 04 Sep 2009 13:23:24 +0000

Parte final da nossa sequência de códigos.

Resultado final:

Please upgrade your browser

Código completo:

<html>
<head>
<title>Contando Checkboxtitle>
<script language="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;
}
function pegaQuantidade(){
  var total; 
  total = contaCheckbox();
  if (total > 0){
    alert("Quantidade retornada: " + total);		
  }else{
    alert("Selecione pelo menos um checkbox");
  } 
}
script>
head>
<body>

<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>
<input type="button" value="VERIFICAR" onclick="pegaQuantidade();" />
form>
body>
html>

JavaScript: Contando Checkbox Selecionados (2)

Tiago — Fri, 04 Sep 2009 13:11:14 +0000

Como prometido, vamos pegar o retorno da função e mostrar o resultado na tela.

- Primeiro, vamos utilizar uma função para obter o retorno, chamado pegaQuantidade.
- Segundo, inserir um botão, que ao clicar, vamos exibir na tela a quantidade de checkbox selecionados; o código deve ficar dentro das tags

function pegaQuantidade(){
  var total; 
  total = contaCheckbox();
  if (total > 0){
    alert("Quantidade retornada: " + total);		
  }else{
    alert("Selecione pelo menos um checkbox");
  } 
}

JavaScript: Contando Checkbox Selecionados (1)

Tiago — Fri, 04 Sep 2009 12:42:21 +0000

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 Checkboxtitle>
<script language="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>

<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>