Question

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

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

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

CSSdeck

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

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

我的另一个问题是，输入两侧的我的+和 - 按钮与其内容进行交互，但与项目总价格无关，尽管尝试次数不成功:(

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

CSSdeck

非常感谢您的帮助

Answer 1

使用按钮

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

更改为此代码段：

$('#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);
});

以javascript报价表格显示总价值

1 个答案: