在 keyup 上输入字段值，也可以手动输入

Question

我一共有6个输入框，比如

<input type="text" name="count500" id="count500" value="">
<input type="text" name="count200" id="count200" value="">
<input type="text" name="count100" id="count100" value="">
<input type="text" name="count50" id="count50" value="">
<input type="text" name="count10" id="count10" value="">
<input type="text" name="total" id="total" value="">

对于前五个输入字段值中的每一个，在键入时，总数会立即显示在 "total" 输入字段中。

<script>
  function doTotal() {
    count500 = parseFloat($("#count500").val() * 500) || 0;
    count200 = parseFloat($("#count200").val() * 200) || 0;
    count100 = parseFloat($("#count100").val() * 100) || 0;
    count50 = parseFloat($("#count50").val() * 50) || 0;
    count10 = parseFloat($("#count10").val() * 10) || 0;
    total = count500 + count200 + count100 + count50 + count10;
    $("#totak").val(nc.toFixed(2));
  }

$('input').keyup(function() {
  doTotal();        
}); 
</script>

运行良好，没有问题。

但我也喜欢用户手动输入合计值的功能。目前输入的任何内容都会消失，

感谢任何帮助

Answer 1

在总计以外的输入元素上加一个class inputValues。通过添加 class，您将排除总计的输入字段。

HTML

<input type="text" name="count500" class="inputValues" id="count500" value="">
<input type="text" name="count200" class="inputValues" id="count200" value="">
<input type="text" name="count100" class="inputValues" id="count100" value="">
<input type="text" name="count50" class="inputValues" id="count50" value="">
<input type="text" name="count10" class="inputValues" id="count10" value="">
<input type="text" name="total" id="total" value="">

jQuery

function doTotal() {
  count500 = parseFloat($("#count500").val() * 500) || 0;
  count200 = parseFloat($("#count200").val() * 200) || 0;
  count100 = parseFloat($("#count100").val() * 100) || 0;
  count50 = parseFloat($("#count50").val() * 50) || 0;
  count10 = parseFloat($("#count10").val() * 10) || 0;
  total = count500 + count200 + count100 + count50 + count10;
  $("#totak").val(nc.toFixed(2));
}
$('input.inputValues').keyup(function() {
  doTotal();        
});

Answer 2

这是您问题的其他解决方案，如果您需要可以使用。

这是您到达目的地的捷径。

修改HTML:

<input type="text" name="count500" class="count counter" data-multi= "500" value="">
<input type="text" name="count200" class="count counter" data-multi= "200" value="">
<input type="text" name="count100" class="count counter" data-multi= "100" value="">
<input type="text" name="count50"  class="count counter" data-multi= "50" value="">
<input type="text" name="count10"  class="count counter" data-multi= "10" value="">
<input type="text" name="total" class="doTotal" value="">

新建 jQuery:

$(".count").on("keyup", function(){
    var doTotal = 0;
    $(".counter").each(function(){
        var multiplyer = $(this).attr("data-multi");
        doTotal += parseFloat($(this).val() * multiplyer) || 0;
    });
    $(".doTotal").val(doTotal.toFixed(2));
});

如果您需要帮助，请告诉我。

在 keyup 上输入字段值，也可以手动输入

input field value on keyup but also can be manual input

jquery

keyup