使用 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);
});

可以使用。