Javascript updates several inputs

Asked

Viewed 71 times

1

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

Look at 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>
<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 class="valor_principal" value="100">
<input class="valor_principal" value="200">
<input class="valor_principal" value="300">

In Alert(total) you can see the result happening...
Aogra, I need him to update the values on each
Thanks for the help...

javascript

  • But you have 5 cehckbox only for 3 inputs, how it works?

  • That’s right... but that’s right...

  • Checkboxes are optional events and class="main value" inputs is the value of each package. When you click on a checkbox, you need to update the values of all class="main value_values".

  • I need the "main value" to be input, because the seller can still change the final value, taking your commission...

  • But shouldn’t five checkboxes for 5 inputs? What should happen to 2 checkboxes that are not covered by inputs? What each checkbox means in relation to each input?

  • Checkboxes and inputs class="main value_has no direct relation... Imagine the following. You went to a travel agency and they have 3 travel options (main value", but you have 5 optional events to include if you want.

  • What I want to do is, when I choose an optional event, add the value of that event to all the trips offered...

  • Ha ok, got it Rafael, I’ll help

  • Thank you @Miguel

  • Can it be with jQuery right? Since you’re importing it..

  • No problem, it can be yes...

Show 6 more comments

2 answers

0

See if this helps you (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>
<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 class="valor_principal" id="a" value="100">
<input class="valor_principal" id="b" value="200">
<input class="valor_principal" id="c" value="300">

0

I added the class evento to checkboxes for easy selection (but also gives $('input[type="checkbox"]'), if you’re sure it’s just those), and data-val inputs to store 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>
<input type="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">

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.