以 javascript 报价单显示总值答案

【问题标题】：Display total values in javascript quotation form以 javascript 报价单显示总值
【发布时间】：2016-02-07 18:43:29
【问题描述】：

我正在努力学习和理解 js/jquery 操作，今天我在一个简单的函数问题上失去了理智。

我想创建一种报价单，在表格下方显示自动更新的计算价格，具体取决于表格中选中/未选中的框、单选按钮和数字输入。

这是一个*一点点*工作示例：

CSSdeck

在这个例子中，我可以分别显示我的商品总价（商品数量 * itemprice var）和我的总价（复选框和单选按钮的总价值）。我希望我的总价包括每个活动的项目总价：

$("input:checkbox, input:radio").click
$('#nbItems').change

我的另一个问题是，我的输入两侧的 + 和 - 按钮与其内容交互，但不与项目总价交互，尽管许多尝试都不成功:(

这是通过编辑我的 calcTotal() 函数的另一种尝试，但我显然理解/做错了什么......：

CSSdeck

非常感谢您的帮助

【问题讨论】：

欢迎来到 SO。请在此处发布相关代码，因为损坏的链接对后面的人没有用。 SO 也有一个 sn-p 编辑器。编辑时点击小相框

标签： javascript jquery forms input

【解决方案1】：

使用按钮更改值后，您需要使用 jQuery trigger() 函数

改成这个sn-p的代码：

$('#cnt-up').click(function() {
    itemsAmount.val(Math.min(parseInt($('#nbItems').val()) + 1, 20));
    $("#nbItems").trigger("change"); // add this line
});
$('#cnt-down').click(function() {
    itemsAmount.val(Math.max(parseInt($('#nbItems').val()) - 1, 0));
    $("#nbItems").trigger("change"); // add this line
});

这会触发 change 事件，稍后将在您的代码中处理

在您问题的另一部分，为了保持更新总数，请将calcTotal() 函数更改为：

function calcTotal(){

total = 0; // reset

    $("input:checked").each(function()
    {
        //This happens for each checked input field
        var value = $(this).attr("value");
        total += parseInt(value); 

    });

total += $("#nbItems").val() * itemPrice;
}

并从$("#nbItems").change() 事件中调用它：

$('#nbItems').change(function(){
    $('#result').text($(this).val() * itemPrice);
    calcTotal();
    $('#total').text(total);
});

【讨论】：