(Resolvido) Contagem de checkbox

Luiz Tibo · Setembro 2, 2010

Estou querendo fazer um script em javascript para fazer a contagem de checkbox selecionados na pagina da net. E que essa quantidade seja mostrada em algum lugar do site. A pessoa entra em sua conta e ai tem uma pagina com uma tabela e que mostra os registros e cada um tem um checkbox. De inicio já vem todos marcados, ai apareceria a quantidade total dos checkbox já, mas dpois q ela clicase, pra desmarcar ou marcar a nova quantidade aparece em tempo real.

Fiz alguam coisa ai já. Mas não sei exatamente o q fazer. Como ligar o php que esta responsavel por imprimir no site com o javascript q faz a contagem?

Dicas please.

<script language="javascript">
function ContarNotas(){
var inputs,i,checados;
inputs = document.getElementsByTagName('ID[]');
for(i=0; i<inputs.length; i++){
if(inputs[i].type=='checkbox'){
if(inputs[i].checked==true){
checados++;
}
}
}
return(checados);
}
</SCRIPT>


<td height="38" colspan="9"><div align="left" class="style10">NUMEROS DE NOTAS SELECIONADAS: <?php echo $checados;?></div></td>


<td><div class="style12" align="left">
        <input name="ID[]" value="<?php echo $ID;?>" type="checkbox" checked="checked" onclick="ContarNotas()"/> 
<?php echo $ID;?></div></td>

Tenko · Setembro 2, 2010

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>

<script>
var d = document;
function $( bloco )
{
    return d.getElementById( bloco );
}

function getItensSel()
{
    itens = 0;
    var oElementos = d.getElementsByTagName('input');
    for( var i = 0; i < oElementos.length; i++ )
    {
        if( oElementos[ i ].type == 'checkbox' )
        {
           if( oElementos[ i ].checked )
           {
              itens++;
           }
        }
    }
    
    $( 'total' ).innerHTML = itens;
}
</script>
</head>
<body onLoad="java script:getItensSel();">
<table width="100%"  border="1" cellspacing="1" cellpadding="1">
  <tr>
    <td><input type="checkbox" name="checkbox" value="checkbox" onClick="getItensSel()"></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="checkbox" onClick="getItensSel()"></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="checkbox" onClick="getItensSel()"></td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox" value="checkbox" onClick="getItensSel()"></td>
  </tr>
  <tr>
    <td>
        Itens marcados <span id="total">0</span>
    </td>
  </tr>
</table>
</body>
</html>

Luiz Tibo · Setembro 2, 2010

Valeu =].

Mas você poderia dar uma explicaçãozinha pra mim?

Tipo o que seria esse "bloco" ai

return d.getElementById( bloco );

E aqui como funciona esse codigo?

var oElementos = d.getElementsByTagName('input');

E como funcioona esse innerHTML?

$( 'total' ).innerHTML = itens;

Meu checkbox e colocado uam vez só, mas como fica dentro de um while porque gera varios registros. é por isso que o nome é com colchete ne? No meu caso ID[]

Obrigado pela ajuda.

Está dando certo, porem so deu certo imprimindo em uma alert. Como faço pra imprimir na pagina da net?

Tipo, seria impresso nessa variavel ai! Pra aparecer no site, mas como faço agora com o javascript?

<td height="38" colspan="9"><div align="left" class="style10">NUMEROS DE NOTAS SELECIONADAS: <?php echo $total;?></div></td>

Tipo que usando document.write(itens) por exemplo, apaga a pagina tora pra mostrar o resultado. quero que mostra do lado de NUMEROS DE NOTAS SELECIONADAS:

Eu teria que fazer o que ta na variavel em javascript passar pro PHP, como eu faria isso?

E eu precise que seja atualizado sempre, essa variavel, mas como fazer isso se o php roda no servidor? ele não sera executado toda vez que o o evento do click do javascript for executado vai?

Me ajudem ai =]

Editado Setembro 2, 2010 por Luiz Tibo

kuroi · Setembro 3, 2010

crie um span no local onde você quer escrever o total e ponha o id dele com o nome de "total".

ai o codigo $( 'total' ).innerHTML = itens; q o Tenko passou deve funcionar.

Luiz Tibo · Setembro 6, 2010

Mas não consegui, pra usar esse código é apenas usar ele no JavaScript e depois usar a variavel "$total" em qualquer lugar?

Obrigado.

kuroi · Setembro 8, 2010

não entendi sua pergunta, mas posta ai o codigo todo q você usou.

Luiz Tibo · Setembro 17, 2010

Usei esse codigo ai abaixo: Ele chamava a função contava as notas selecionadas, porem eu so consegui fazer aparecer em um alert. E queria q aparecese em algum lugar na tabela dentro do site.

&lt;script language="javascript">

d = document;
itens = 0;
function $(bloco)
{
return d.getElementById(bloco);
}

function getItensSel()
{
//itens = 0;
var objetoDados = document.getElementById('dados');
var oElementos = d.getElementsByTagName('input');

for(var i = 0; i < oElementos.length; i++)
{
if(oElementos[i].type == 'checkbox')
{
if(oElementos[i].checked)
{
itens++;
}
}
}
//alert("numero de notas: "+itens);
//d.write(itens);
$('total').innerHTML = itens;
objetoDados.value = itens;
}

</script>

Issi aqui em dentro da table no <body>

<input name="ID[]" value="<?php echo $ID;?>" type="checkbox" checked="checked" onclick="getItensSel()"/>

E eu tambem queria uma função pra quando clicar num checkbox o que esta em uma caixa de texto apague. isso ai resolve em algo?

function pesqtodos() 
{ 
    var objetoDados = document.getElementById('todos');
    if (objetoDados.checked)
    {
        alert("aa");
    }
   
}

kuroi · Setembro 18, 2010

crie um span no local onde você quer escrever o total e ponha o id dele com o nome de "total".

inclusive no codigo do tenko já tem isso la.

Luiz Tibo · Setembro 20, 2010

Com o span la não consegui, não. O valor não muda. Mas consegui colocando uma caixa de texto ai coloquei transparente e sem bordas. xD

Valeu mesmo Tenko e Kuroi.

Abraços

Entrar

(Resolvido) Contagem de checkbox

Pergunta

Luiz Tibo

Link para o comentário

Compartilhar em outros sites

8 respostass a esta questão

Posts Recomendados

Tenko

Link para o comentário

Compartilhar em outros sites

Luiz Tibo

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Luiz Tibo

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Luiz Tibo

Link para o comentário

Compartilhar em outros sites

kuroi

Link para o comentário

Compartilhar em outros sites

Luiz Tibo

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades