以javascript報價形式顯示總值

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