Javascript sum or subtract by clicking checkbox

Question

I need a Javascript that clicking on a checkbox adds up to a total already existing in another input. And when you disable the checkbox you subtract the checkbox value from this total.

I got the following:

<input type="checkbox" id="evento_value" value="99.00" onclick="AddValor()">
<input type="checkbox" id="evento_value" value="120.00" onclick="AddValor()"> 
<input type="checkbox" id="evento_value" value="99.00" onclick="AddValor()">
<input type="checkbox" id="evento_value" value="300.00" onclick="AddValor()">
<input type="checkbox" id="evento_value" value="5.00" onclick="AddValor()">

And I also have an input with an established value, where the values of clicking on each checkbox should be added. If the user eventually disables the checkbox, the value is subtracted. I’m running the following code for this:

<script>
function AddValor() {
  var resultado = parseInt(document.getElementById('evento_value').value, 10);
  var total = parseInt(document.getElementById('valor_principal').value, 10);

  if(document.getElementById('evento_value').checked == true) {
    total = total +resultado;
  } else if(document.getElementById('evento_value').checked == false) {
    total = total - resultado;
  }

  $("#valor_principal").val(total);
}

AddValor();

Where #value_main is the input with the already calculated value at which to add or subtract a certain value by clicking on the checkbox.

The fact is that this script only works for the first input checkbox and not for the others. I suspect it is related to the Ids. Would anyone have any suggestions?

Answer 1

Follow an example using Jquery.

var total = 0;
//Chama a função com click em qualquer checkbox
$(':checkbox').click(function() {
  //Atribui o valor do input p/ variável 'valor'
  var valor = parseInt($(this).val());
  //Se o checkbox for marcado ele soma se não subtrai
  if ($(this).is(":checked")) {
    total += valor;
  } else {
    total -= valor;
  }
 //Atribui o valor ao input
  $("#evento_value").val(total);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="evento_value1" value="99.00">
<input type="checkbox" id="evento_value2" value="120.00">
<input type="checkbox" id="evento_value3" value="99.00">
<input type="checkbox" id="evento_value4" value="300.00">
<input type="checkbox" id="evento_value5" value="5.00">

<input type="text" id="evento_value" onclick="AddValor()">

Answer 2

With javascript, to avoid code redundancy it is possible to insert an event in all checkbox, something more or less like:

var inputs = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < inputs.length; i++) {
  inputs[i].addEventListener('click', AddValor);
}

function AddValor() {
  var resultado = parseFloat(this.value, 10);
  var principal = document.getElementById('valor_principal');
  var total = parseFloat(principal.value, 10);

  this.checked == true ? total += resultado : total -= resultado;

  principal.value = total;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="evento_value1" value="99.00">
<input type="checkbox" id="evento_value2" value="120.00">
<input type="checkbox" id="evento_value3" value="99.00">
<input type="checkbox" id="evento_value4" value="300.00">
<input type="checkbox" id="evento_value5" value="5.00">

<input id="valor_principal" value="100">