Somar checkbox checked

[helkton 0]

iai galera, tenho uma pendenga e não consigo achar nada pra suprir minha dúvida rsss

seguinte....

 

Tenho um cardápio Online onde tenho os devidos ITENS sendo abertos em uma janela modal e nesta janela tenho os devidos ITENS EXTRAS em um checkbox que o usuario clicam e adicionam

esta é minha lista de ADICIONAIS EXTRAS QUE PEGO DO BANCO DE DADOS 

 

<label style="border:0px red solid;font-size:1em;width:90%;text-align:left;padding:0px;margin-left:2em;" onclick="somar()">
<input style="height:23px;width:23px;cursor:pointer" type="checkbox" class='limited<?php echo $resultExtrasDelivery->idExtraDelivery?>' id="valorItemExtra" name="idExtraSelects[]" value="<?php echo $resultItensExtras->valorItemExtra?>" >
                        <span style="cursor:pointer"><?php echo $resultItensExtras->nomeItemExtra?>
                          <span style="font-size:0.7em;color:#DD2C00">
                            <small> <?php if($resultItensExtras->valorItemExtra == '0.00'){echo'';}else{echo '+R$ '.$resultItensExtras->valorItemExtra.'<input type="text" value="'.$resultItensExtras->valorItemExtra.'">';}?></small>
                          </span>
                        </span>
                      </label>

ela vem tipo assim

AcréscimoTradicional - Escolha até 3 opções

BACON 1,00

CALABRESA 1,00

MUSSARELA 1,00

PRESUNTO 1,00

OVO 1,00

 

o que quero fazer é somente somar os itens clicados pelo usuario e somar com o TOTAL DO ITEM 

tipo pegar o total do item tipo R$30,00 e ir somando com os acrescimos escolhidos

 

<script>
  function somar() {
  // var valorItem = document.getElementById('valorItemExtra').value;
  var checkbox = document.getElementById('#valorItemExtra');
  var total = 0;

  if(checkbox.checked == true){
    total += checkbox.value;
}
document.getElementById('somar').innerHTML = total;
}
</script>

 

[tetsuo 0]

quantos elementos possuem a id #valorItemExtra?

[helkton 0]

Bom depende do cardapio...

Tipo pode ter um item xtudo com os seguintes itensExtras

*Adicional Extra

Bacon

Calabresa

Mussarela

 

E outro item xcalabresa com os seguintes itensExtras

*Adicional Extra

Bacon 1,00

Calabresa1,00

Mussarela1,00

 

*Molho especial

Pimenta1,00

Maionese1,00

Molho verde1,00

 

E por ai vai

[Omar~ 87]

<!-- Como errar ao escrever HTML ^.^ -->
<input id="valorItemExtra" />
<input id="valorItemExtra" />

<input id="#valorItemExtra" />
<input id="#valorItemExtra" />

 

O atributo ID é único, somente um elemento pode possuir o mesma propriedade.

Imagine 1/2/3 ou mais pessoas com o mesmo número de RG ou CPF quem sabe até o mesmo número de telefone, que confusão não seria, no mínimo dizer que isso nunca daria certo.

Da mesmo jeito o atributo "ID" deve ser usado, de qualquer forma tanto o javascript quanto o próprio html ou o browser desconsidera isso apenas usando o ultimo ID pois ele sobrescreve os demais porque como dito só pode existir um apenas com a mesma identificação.

 

Resposta para o problema.

• Remova o erro de usar mais de um ID igual.
• Busque pelos elementos de input
• Adicione um ouvinte que detecta quando algum input é alterado.
• Faça o calculo dentro de um loop pelos elementos quando marcados incrementa o valor.