javascript - 使用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>