Radiobutton and Checkbox Sum

Question

Radiobutton and Checkbox Sum

Navigation

#1 by (3 votes)

1

I am 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 adds the selected checkboxes and displays the total value also in the same input My problem is this, the time you select the radiobutton it adds the selected radiobutton but when I dial another radiobutton it just does not subtract

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

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

Follow the code below.

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 this so I can complete this system.

I do not know what happened but the code here on the site works but when I put it in some online page, it does not display the result.

If you want to take a look here, you can access here: link

javascript html checkbox radiobutton

asked by anonymous 27.10.2015 / 05:26

1 answer

Error Generating PDF with PHPMailer [closed] Doubt cast pointer

score 3 · Accepted Answer

The structure of your code does not consider when a radio is deselected 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 some checkbox or radius is modified.

Comments:

"cleaned" HTML to leave only what matters to the problem
I used the native function addEventListener() to assign events instead of 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>