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="">

在前五个输入字段值的每一个上，在keyup上，总数会立即显示在“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

将类inputValues添加到除total之外的input元素。通过添加类，您将排除toltal的输入字段。

<强> 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));
});

如果你得到帮助，请告诉我。

键盘上的输入字段值，但也可以手动输入

2 个答案: