JavaScript add or subtract by clicking checkbox

Question

JavaScript add or subtract by clicking checkbox

Navigation

#1 by (1 votes)
#2 by (1 votes)

0

I need a JavaScript that when clicking on a checkbox sum determined to a total already existing in another input. And when you disable the checkbox, subtract the checkbox value from this total.

I have 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 also I have an input with an already established value, where you must add the values of click on each checkbox. If the user eventually disables the checkbox, subtract the value. I'm issuing 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 #main_value is the input with the already calculated value in which you must 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 IDs. Would anyone have any suggestions?

javascript

asked by anonymous 13.03.2017 / 22:10

2 answers

POST problem using JQuery Image WhatsApp, Wordpress

score 1 · Answer 1

Following is 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><inputtype="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()">

score 1 · Answer 2

With javascript, to avoid code redundancy, you can insert an event in all checkbox , something 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><inputtype="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">