1

Galera eu aqui um codigo em js que ao selecionar um checkbox ele exibe o valor do checkbox em um input e se eu selecionar mais de um ele soma os checkbox selecionados e exibe o valor total também na mesma input o meu problema tá sendo o seguinte, na hora que selecionar as radiobutton ele soma a radiobutton selecionada mas quando eu marco outra radiobutton ele simplesmente não subtrai

EXEMPLO: RADIO1 = 10 REAIS RADIO2 = 15 REAIS RADIO3 = 40 REAIS

se eu selecionar a RADIO1 ele soma 10 reais, mas se por acaso eu mudar da RADIO1 para RADIO3 ele não subtrai a RADIO1 ele só soma a RADIO3 ai o valor total fica 50 ao invés de 40...

Segue abaixo o codigo..

function checkChoice(whichbox) {
  with(whichbox.form) {
    if (whichbox.checked == false)
      hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value);
    else
      hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value);
    return (formatCurrency(hiddentotal.value));
  }
}

function formatCurrency(num) {
  num = num.toString().replace(/\$|\,/g, '');
  if (isNaN(num)) num = "0";
  cents = Math.floor((num * 100 + 0.5) % 100);
  num = Math.floor((num * 100 + 0.5) / 100).toString();
  if (cents < 10) cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
  return ("" + num + "." + cents);
}

// funcoes somas de checkds

function checkChoice(whichbox) {
  with(whichbox.form) {
    if (whichbox.checked == false)
      hiddentotal.value = eval(hiddentotal.value) - eval(whichbox.value);
    else
      hiddentotal.value = eval(hiddentotal.value) + eval(whichbox.value);
    return (formatCurrency(hiddentotal.value));

  }
}
<form name=myform class="noformat">
  <label class="btn btn-default">
    <input type="radio" name="tamanho" id="option1" value="9.25" autocomplete="off" onchange="this.form.total.value=checkChoice(this);">250GR
  </label>
  <label class="btn btn-default">
    <input type="radio" name="tamanho" id="option2" value="11.25" autocomplete="off" onchange="this.form.total.value=checkChoice(this);">400GR
  </label>
  <label class="btn btn-default">
    <input type="radio" name="tamanho" id="option3" value="14.25" autocomplete="off" onchange="this.form.total.value=checkChoice(this);">600GR
  </label>
  <tr>
    <td>
      <input type="checkbox" autocomplete="off" name="valor" value="2" onClick="this.form.total.value=checkChoice(this);">L. Ninho</td>
    <td>
      <input type="checkbox" autocomplete="off" name="valor" value="3" onClick="this.form.total.value=checkChoice(this);">Nutella</td>
    <td>
      <input type="checkbox" autocomplete="off" name="valor" value="3" onClick="this.form.total.value=checkChoice(this);">Chantilly</td>
  </tr>
  <tr>
    <td>
      <input type="checkbox" autocomplete="off" name="valor" value="1.5" onClick="this.form.total.value=checkChoice(this);">L. Condensado</td>
    <td>
      <input type="checkbox" autocomplete="off" name="valor" value="1.5" onClick="this.form.total.value=checkChoice(this);">S. Valsa</td>
    <td>
      <input type="checkbox" autocomplete="off" name="valor" value="2.5" onClick="this.form.total.value=checkChoice(this);">Sorvete</td>
  </tr>
  <div class="input-group">
    <span class="input-group-addon">Valor Total:</span>
    <input class="form-control input-lg" id="disabledInput" name="total" type="text" placeholder="" readonly disabled>
    <input type=hidden name=hiddentotal value=0>
    <span class="input-group-addon">R$</span>
  </div>
</form>

Alguém me ajuda falta isso pra eu completar esse sistema.

Eu não sei o que aconteceu mas o código aqui no site ele funciona mas quando eu coloco em algum pagina online, ele não exibe o resultado.

Caso queira dar um olhada aqui acessa aqui: http://acaiamarena.com.br/modulos/teste.php

1
  • 1
    dicas: não utilize a função eval(), não é uma boa prática; utilize todas as chaves mesmo para instruções de apenas uma linha para facilitar a leitura Commented 27/10/2015 às 9:34

1 Resposta 1

3

A estrutura do seu código não considera quando um radio é desmarcado ao selecionar outro radio, isso que causa o problema de não subtrair. Como acho que seria complexo controlar os campos que já foram somados é mais simples somar todos os valores quando algum checkbox ou radio for modificado.

Observações:

  • "limpei" o HTML para deixar somente o que importa para o problema
  • utilizei a função nativa addEventListener() para atribuir os eventos ao invés do atributo onclick
  • utilizei o seletor nativo querySelectorAll() para selecionar os <input>

function formatCurrency(num) { // função original - sem modificação
  num = num.toString().replace(/\$|\,/g, '');
  if (isNaN(num)) num = "0";
  cents = Math.floor((num * 100 + 0.5) % 100);
  num = Math.floor((num * 100 + 0.5) / 100).toString();
  if (cents < 10) cents = "0" + cents;
  for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++)
    num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3));
  return ("" + num + "." + cents);
}

var form = document.forms[0];
var inputs = form.querySelectorAll('input[type=checkbox],input[type=radio]');
// iterar todos os inputs
for (var i = 0; i < inputs.length; i++) {
  // vincular função ao evento "change"
  inputs[i].addEventListener('change', function() {
    var soma = 0;
    for (var j = 0; j < inputs.length; j++) {
      if (inputs[j].checked) {
        // interpreta como float, usando parseFloat ao invés de eval
        soma += parseFloat(inputs[j].value);
      }
    }
    form.hiddentotal.value = soma; // atribui valor ao campo oculto
    form.total.value = formatCurrency(soma) // exibe valor formatado
  }, false);
}
label {
  display: inline-block;
  width: 210px;
  float: left;
}
<form name="myform">
  <label><input type="radio" name="tamanho" value="9.25">250GR</label>
  <label><input type="radio" name="tamanho" value="11.25">400GR</label>
  <label><input type="radio" name="tamanho" value="14.25">600GR</label>
  <label><input type="checkbox" name="valor" value="2">L. Ninho</label>
  <label><input type="checkbox" name="valor" value="3">Nutella</label>
  <label><input type="checkbox" name="valor" value="3">Chantilly</label>
  <label><input type="checkbox" name="valor" value="1.5">L. Condensado</label>
  <label><input type="checkbox" name="valor" value="1.5">S. Valsa</label>
  <label><input type="checkbox" name="valor" value="2.5">Sorvete</label>
  <div>
    <span>Valor Total:</span>
    <input name="total" type="text" readonly disabled>
    <input type="hidden" name="hiddentotal" value="0">
  </div>
</form>

6
  • eu não sei o que aconteceu mas o codigo aqui no site ele funciona mas quando eu coloco em algum pagina online, ele não exibe o resultado caso queira dar um olhada aqui acessa aqui acaiamarena.com.br/modulos/teste.php Commented 27/10/2015 às 13:57
  • @AlfredoLima coloque a tag <script> imediatamente antes da tag de fechamento </body> Commented 27/10/2015 às 13:59
  • coloquei mesmo asism não funcionou... :( Commented 27/10/2015 às 16:52
  • Olá, por favor me ajuda, estou com o mesmo problema já faz meses... Commented 29/10/2015 às 13:15
  • @AlfredoLima coloque a tag <script> depois da tag </form>, na sua página o script está como primeiro elemento, e como o navegador interpreta a página de cima para baixo, no momento que o script é executado os elementos HTML não existem, o que causa os erros. Commented 29/10/2015 às 13:28

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .