Esconder DIV quando chekcbox's desmarcadas

[tubarao21 0]

Olá a todos!

Bem, muito noob em javascript.

Apanhei um script que agora tenho de finalizar. Não fui eu que o fiz, mas sou eu que vou acabar.

Ora bem, tenho um form com várias checkbox. Estas checkbox's têm o mesmo nome (formam um array).

Equivalem a apostas, marcando uma checkbox, aposta 0,10€, marcando duas, vale 0,20€ e por aí alem.

Quando uma checkbox é marcada, mostro uma div que contem o total de apostas (checkbox's marcadas) e valor total da aposta.

A questão é, desmarcando todas as checkbox's, teria de esconder a DIV que já mostrei.

Deixo algum código:

São várias checkbox's. Deixo apenas duas para simplificar:

<div id="chkbox">
<input name="prod2" onclick="Count(this, '01', 0)" value="01" type="checkbox" />
</div>

<div id="chkbox">
<input name="prod2" onclick="Count(this, '02', 1)" value="02" type="checkbox"/>
</div>

A função:

function Count(Checked, id, bucle)
{    
var Contador = 0;

for ( x = 0; x< 10; x++ )
{

if (document.boleto.prod2[x].checked)
    {
    Contador++;    

    var total = Contador * 0.10;

    var novo="<br/><div name='dinamico'>Valor: "+total+"</div><br/>";

document.getElementById("div_inicial").innerHTML=novo;
    } else {


}
}

Edited January 24, 2013 by thoga31
geshi

[brunoais 65]

Tens que corrigir essa indentação. Só está a complicar.

Não mistures o javascript com o HTML como fizeste aqui:

<input name="prod2" onclick="Count(this, '02', 1)" value="02" type="checkbox"/>

Em vez disso, usa o getElementsByName para obteres os elementos que queres e usa o .onclick (property onclick) de cada um dos elementos que é retornado pelo getElementsByName para registares o evento de onclick nos vários checkboxes. Basta gravares uma referencia para a função que queres.

Depois, basta usares o

checkboxRef.checked

+ info: https://developer.mozilla.org/en-US/docs/HTML/Element/Input#attr-checked

Para saberes se a checkbox que estás a verificar está selecionada ou não.

Para percorreres o array basta usares um ciclo for (parecido com o que tens).

Cuidado com as variáveis não "declaradas". Enquanto não entenderes o que realmente está a fazer ao não declara-las, usa sempre o var para declarar as variáveis.

Para esconderes o div, basta teres um apontador para o div que queres.

Por exemplo, se o div for assim (no HTML):

<div id="result"></div>

então podes obter uma referencia para esse div assim:

var resultDiv = document.getElementById("result");

Depois, calculas o resultado da soma tendo em conta as checkboxes.

Usando esse resultado basta usares:

if(value > 0){
   resultDiv.style.display = "block";
}else{
   resultDiv.style.display = "none";
}

Há maneiras melhores de fazer isto mas já fazeres assim como indiquei já é muito bom para o teu nível.

Não te esqueças que o id é único por cada documento. O que tens no teu exemplo de código HTML está errado.

Edited January 24, 2013 by brunoais