jquery计算账单总额

Question

我的表单中有 3 个文本字段。第一个取账单中数量的价值，第二个取每件商品的价格价值，第三个取适用税金的价值。我在第 4 个文本字段中显示最终账单金额。我试过以下代码：

$(document).ready(function () {

    $('#Quantity, #Rate, #TaxAmount').keyup(function () {

        var total = 0.0;
        var qty = $('#Quantity').val();

        var rate = $('#Rate').val();

        var tax = ('#TaxAmount').val();

        var amount = (qty * rate);
        total = tax + amount;


        $('#TotalAmount').val(total);
    });
});

运行代码后，ID 为 TotalAmount 的第 4 个文本框中没有显示任何内容。无法弄清楚是什么问题。有人请指导。

Answer 1

首先，您在var tax 行中缺少$。

除此之外，您需要使用 parseFloat 将您从 .val() 获得的字符串转换为数字，以便能够对它们进行算术运算。

$(document).ready(function() {
  var $fields = $('#Quantity, #Rate, #TaxAmount');
  $fields.keyup(function() {
    var qty = parseFloat($('#Quantity').val());
    var rate = parseFloat($('#Rate').val());
    var tax = parseFloat($('#TaxAmount').val());
    var amount = (qty * rate);
    var total = total = tax + amount;
    $('#TotalAmount').val(total);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="Quantity" placeholder="Quantity"> *
<input id="Rate" placeholder="Rate"> +
<input id="TaxAmount" placeholder="Tax"> =
<input id="TotalAmount" readonly>

Answer 2

您忘记了('#TaxAmount') 之前的$ 符号：

$(document).ready(function () {

    $('#Quantity, #Rate, #TaxAmount').keyup(function () {

        var total = 0;
        var qty = $('#Quantity').val();

        var rate = $('#Rate').val();

        var tax = $('#TaxAmount').val(); // here

        var amount = (qty * rate);
        total = tax + amount;


        $('#TotalAmount').val(total);
    });
});