如何用JavaScript实现单价、数量与折扣的总价计算？

完全可以用JavaScript（包括你用到的jQuery）实现这个计算功能。你的代码已经接近正确，问题出在几个细节上，下面是修正后的完整代码和问题说明：

你的代码存在的问题 #

• 最后给总价输入框赋值时，错误地用了rateqty（单价×数量的未折扣金额），而非计算好的折扣后总价final
• 未处理输入为空的情况，当某个输入框为空时，parseFloat会得到NaN，导致计算结果异常
• 页面背景样式的CSS语法错误：linear-gradient的括号未闭合，正确写法是background-image: linear-gradient(to right, seagreen , lightyellow);
• 脚本放在表单元素中间，虽能运行，但更规范的做法是放在</body>之前或用DOM加载完成事件包裹

修正后的完整代码 #

<body style="background-image: linear-gradient(to right, seagreen , lightyellow);">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-3">
                <div class="card">
                    <div class="card-body">
                        <div class="form-group col-lg-12 col-md-12 col-sm-12">
                            <div>
                                <label>客户姓名:</label>
                                <input type="text" class="form-control" id="cname" name="customername" />
                            </div>
                            <div>
                                <label>单价:</label>
                                <input type="number" class="form-control calculationadd" id="testprice" name="testamt" min="0" step="0.01" />
                            </div>

                            <div>
                                <label>数量:</label>
                                <input type="number" class="form-control calculationadd" id="qty" name="qtyname" min="0" step="1" />
                            </div>

                            <div>
                                <label>折扣百分比(%):</label>
                                <input type="number" class="form-control calculationadd" id="discountid" name="dis" min="0" max="100" step="0.01" />
                            </div>

                            <div>
                                <label>总价:</label>
                                <input type="number" class="form-control" id="totalid" name="total" readonly />
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $(".calculationadd").on("input", function () {
                // 获取输入值，为空时默认设为0
                var testamt = parseFloat($("#testprice").val()) || 0;
                var quan = parseFloat($("#qty").val()) || 0;
                var dis = parseFloat($("#discountid").val()) || 0;

                // 计算未折扣金额
                var rateqty = testamt * quan;
                // 计算折扣金额
                var discountAmount = rateqty * dis / 100;
                // 计算最终总价
                var finalTotal = rateqty - discountAmount;

                // 把结果赋值给总价输入框，保留两位小数
                $("#totalid").val(finalTotal.toFixed(2));
            });
        });
    </script>
</body>

关键改进点说明 #

• 将总价输入框设为readonly，避免用户手动修改
• 给数字输入框添加min、max、step属性，限制输入范围和精度
• 用input事件替代keyup，支持鼠标粘贴等非键盘输入场景
• 处理空值：用|| 0确保空输入时默认值为0，避免NaN错误
• 用toFixed(2)保留两位小数，符合金额显示规范
• 把脚本放在页面底部，并包裹在$(document).ready()中，确保DOM加载完成后再执行
• 修正了背景样式的语法错误

内容的提问来源于stack exchange，提问作者tony