Javascript updates various inputs

Question

Javascript updates various inputs

Navigation

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

1

With the help of @luccascosta I was able to run a code in which, when clicking on a checkbox, it captures the value of that checkbox and updates the value in another input. The problem now is that by clicking on this checkbox, I need to update multiple inputs at the same time. I even managed to do the calculations, but now I can not play the result on their respective inputs.

Note the code:

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

function AddValor() {
  var val_evento = parseFloat(this.value, 10);

  var pacote = new Array();
  $('.valor_principal').each(function() {
    pacote.push($(this).val());
  });

  for (let i = 0; i < pacote.length; i++) {
    var total = jQuery.parseJSON(pacote[i]);

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

    alert(total);

    pacote[i].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 class="valor_principal" value="100">
<input class="valor_principal" value="200">
<input class="valor_principal" value="300">

In the alert (total) you can observe the result happening ...
Aogra, I need him to update the values in each
Thanks for the help ...

javascript

asked by anonymous 14.03.2017 / 20:58

2 answers

Extracting source and destination IP to verify that the server has become dead after attack Reflection with property decorator in typescript does not work

score 0 · Answer 1

See if this helps you (can improve)

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

function AddValor() {
  var val_evento = parseFloat(this.value, 10);

  var pacote = new Array();
  $('.valor_principal').each(function() {
    pacote.push($(this).val());
  });

  for (let i = 0; i < pacote.length; i++) {
    var total = jQuery.parseJSON(pacote[i]);

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

    
    if(i==0)
    var x = document.getElementById('a').value = total;
    if(i==1)
    var y = document.getElementById("b").value = total;
    if(i==2)
    var z = document.getElementById("c").value = total;
    
    //alert(pacote.length);

    pacote[i].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 class="valor_principal" id="a" value="100">
<input class="valor_principal" id="b" value="200">
<input class="valor_principal" id="c" value="300">

score 0 · Answer 2

I have added the class evento to the checkboxes to be easy to select (but also gives $('input[type="checkbox"]') , if you are sure they are only those), and data-val to the inputs to save the original values

var val_p, sum_ev;
$('.evento').on('change', function() {
  sum_ev = 0;
  $('.evento:checked').each(function() {
    sum_ev += Number($(this).val());
  });
  $('.valor_principal').each(function() {
    val_p = Number($(this).data('val'))+sum_ev;
    $(this).val(val_p);
  });
});

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

<input class="valor_principal" data-val="100" value="100">
<input class="valor_principal" data-val="200" value="200">
<input class="valor_principal" data-val="300" value="300">