jQuery Событие onChange несколько входов

Question

<input type="text" id="Count1"  value="20">
<input type="text" id="Count2"  value="30"> 
<input type="text" id="Count3"  value="40"> 
<input type="text" id="Count4"  value="50"> 
<input type="text" id="Count5"  value="60"> 
<div class="inputbox" id="Sum"> ConunSUM </div>

У меня есть несколько входов, может быть до 50, Как мне использовать onchange, Автоматизировать c Суммирование Привести к сумме.

Answer 1

Попробуйте следующий скрипт:

<script type="text/javascript">

            function calculateSum() {
                var sum = 0;
                $(".mycls").each(function () {

                    if (!isNaN(this.value) && this.value.length != 0) {
                        sum += parseFloat(this.value);
                    }
                });
                $("#show").html(sum.toFixed(2));
            }

            $(document).ready(function () {
                $('.mycls').each(function () {
                    $(this).change(function () {
                        calculateSum();
                    });
                });


            });

</script>



<input type="number" value="" class="mycls" >
<input type="number" value="" class="mycls" >
<input type="number" value="" class="mycls" >
<input type="number" value="" class="mycls" >
<input type="number" value="" class="mycls" >
<div id="show">value</div>

Answer 2

Для каждого использованного полученного расчета суммы. Надеюсь, это поможет вам.

$(document).ready(function() {
  $('input').change(function() {
    get_sum();
  });
});
get_sum();

function get_sum() {
  var sum = 0;
  $("input[type='text']").each(function() {
    sum += parseInt($(this).val());
  });
  $('.inputbox').html(sum);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Count1" value="20">
<input type="text" id="Count2" value="30">
<input type="text" id="Count3" value="40">
<input type="text" id="Count4" value="50">
<input type="text" id="Count5" value="60">
<div class="inputbox" id="Sum"> ConunSUM </div>

Answer 3

Может, вот так?

$(".value").on("input", function() 
{
  var sum = 0;
  $('.value').each(function() {
    sum += Number($(this).val());
  });
  $("#sum").html(sum);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="value" value="20">
<input type="text" class="value" value="15">
<div class="inputbox" id="sum"></div>

Answer 4

Добро пожаловать в переполнение стека, вы можете сделать все входные данные как числа, такие как <input type="number" id="Count1" value="20">, а затем использовать

$('body').on('change','input[type="number"]',function () {

var sum = 0;    
$.each($('input'), function (index,element) {
sum += Number($(element).val());    
});

$('#Sum').text(sum);

});

Answer 5

Вы можете прослушать событие input и затем суммировать все значения.

$('input').on('input', function() {
  $('#Sum').text(sum());
});

$('#Sum').text(sum());

function sum() {
  let sum = 0;
  
  $('input').each(function() {
    let value = Number(this.value);

    if (!isNaN(value)) {
      sum += value;
    }
  });
  
  return sum;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="Count1" value="20">
<input type="text" id="Count2" value="30">
<input type="text" id="Count3" value="40">
<input type="text" id="Count4" value="50">
<input type="text" id="Count5" value="60">
<div class="inputbox" id="Sum"></div>