用javascript自动计算输入值的总和

Question

在计算用户输入的数字的总和并自动显示时，我需要一些帮助。当用户删除一个数字时，总和也应该自动计算。

$('.col-lg-1').change(function() {
  var total = 0;
  $('.col-lg-1').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-1">
  <label>TEST 1 </label>

  <input type="hidden" name="section_id" value="<?php echo $section_id; ?>">
  <input type="hidden" name="session_id" value="<?php echo $session_id; ?>">
  <input type="hidden" name="student_id" value="<?php echo $student_id; ?>">
  <input type="hidden" name="class_id" value="<?php echo $class_id; ?>">
  <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1" id="t2">
  <label>TEST 2</label>
  <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1" id="assg">
  <label>TEST 3</label>
  <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1">
  <label>TOTAL</label>
  <output id="result"></output>
</div>

Answer 1

差不多了。您的目标是 '.col-lg-1'，它们是 div，而不是输入。您需要以输入为目标才能读取它们的值。

const $inputs = $('input[type="number"]')

$inputs.change(function() {
  var total = 0;
  $inputs.each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-lg-1">
  <label>TEST 1 </label>

  <input type="hidden" name="section_id" value="<?php echo $section_id; ?>">
  <input type="hidden" name="session_id" value="<?php echo $session_id; ?>">
  <input type="hidden" name="student_id" value="<?php echo $student_id; ?>">
  <input type="hidden" name="class_id" value="<?php echo $class_id; ?>">
  <input type="number" name="mt_ca1" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1" id="t2">
  <label>TEST 2</label>
  <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1" id="assg">
  <label>TEST 3</label>
  <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required>
</div>
<div class="col-lg-1">
  <label>TOTAL</label>
  <output id="result"></output>
</div>

Answer 2

.col-lg-1 是一个 DIV - 您正在附加一个更改事件并试图从一个不起作用的 DIV 中获取 this.value。

相反，将您的输入和（在"input" 事件上）.reduce() 它们的值缓存到一个整数中：

jQuery($ => {

  const $inp = $(".input-sm"); //PS: Use a more specific selector than this one
  const $res = $("#result");

  $inp.on("input", () => {
    const total = $inp.get().reduce((acc, el) => (acc += parseInt(el.value, 10) || 0), 0);
    $res.text(total);
  });
  
});

<div>
<label>TEST 1 </label>
<input type="number" name="mt_ca1" class="inp form-control input-sm rounded-0" required value="0">
</div>
<div class="col-lg-1" id="t2">
  <label>TEST 2</label>
  <input type="number" name="mt_ca2" class="form-control input-sm rounded-0" required value="0">
</div>
<div class="col-lg-1" id="assg">
  <label>TEST 3</label>
  <input type="number" name="mt_ca3" class="form-control input-sm rounded-0" required value="0">
</div>
<div class="col-lg-1">
  <label>TOTAL</label>
  <output id="result"></output>
</div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

您的每个元素都是数字类型，并且具有相同的类“form-control”、“input-sm”和“rounded-0”。 所以要么

$('input[type=number]').change(function() {
  var total = 0;
  $('input[type=number]').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

或

$('.rounded-0').change(function() {
  var total = 0;
  $('.rounded-0').each(function() {
    if ($(this).val() != '') {
      total += parseInt($(this).val());
    }
  });
  $('#result').html(total);
});

可以使用。