Radiobutton and Checkbox Soma

Question

Guys I here a code in js that when selecting a checkbox it displays the value of the checkbox in an input and if I select more than one it sums the checkbox selected and displays the total value also in the same input my problem is being the following, at the time to select the radiobutton he adds the selected radiobutton but when I mark another radiobutton he just doesn’t subtract

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

if I select the RADIO1 it adds 10 real, but if by chance I change from RADIO1 to RADIO3 it does not subtract the RADIO1 it only adds the RADIO3 then the total value is 50 instead of 40...

Below is the code..

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>

Someone help me miss it so I complete this system.

I don’t know what happened but the code here on the site it works but when I put it on some online page, it doesn’t display the result.

If you want to take a look here access here: http://acaiamarena.com.br/modulos/teste.php

Answer 1

The structure of your code does not consider when a radio is unchecked when selecting another radio, which causes the problem of not subtracting. As I think it would be complex to control the fields that have already been added it is simpler to add all the values when any checkbox or radio is modified.

Remarks:

• "cleared" the HTML to leave only what matters to the problem
• I used the native function addEventListener() to assign events instead of the attribute onclick
• I used the native selector querySelectorAll() to select the <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>