Jquery選擇數據價格所有選中的複選框並將它們加在一起

Question

我正在創建自定義計算機建築，但我正在努力更新總價格。

用戶選擇他們想要的處理器，並使用data-price添加到價格上。

這裏是我的HTML

<div class="process_intel_options" style="display:block"> 
      <label class="option"> 
       <input type="radio" name="processor_options" value="i7950" data-price="155" id="intel_options_0" checked="checked" /> 
       Intel Core i7 950 3.06Ghz 
       </label> 
      <br /> 
      <label class="option"> 
       <input type="radio" name="processor_options" value="i7960" data-price="250" id="intel_options_1" /> 
       Intel Core i7 960 3.20Ghz 
       </label> 
     </div> 

     <div class="process_amd_options" style="display:none"> 
      <label class="option"> 
       <input type="radio" name="processor_options" value="i7950" data-price="150" id="amd_options_0" /> 
       AMD Core i7 950 3.06Ghz 
       </label> 
      <br /> 
      <label class="option"> 
       <input type="radio" name="processor_options" value="i7960" data-price="352" id="amd_options_1" /> 
       AMD Core i7 960 3.20Ghz 
       </label> 
     </div> 

而且我的JavaScript，我很新成JavaScript，所以藉口任何錯誤小學生！

var base_price = 300; 
$("#final_price").html(base_price); 

$("*").click(function() { 
    // Update price 

    // Select all checked 
    $(":checkbox").each(function(index) { 
     // Select all checked and with a price 
     $(this).data("price").each(function(index) { 
      // Add the prices 
      base_price += $(this).data("price"); 
     }); 
    }); 
    $("#final_price").html(base_price); 

}); 

它循環的原因是因爲用戶可以選擇顯卡，主板等從無線電（或複選框）列表。

這裏是我住exmple：http://genyx.co.uk/CCB/

請注意，只有處理器目前對他們data-price。

Answer 1

有你的榜樣幾個邏輯問題，導致了無休止的價格上升，當你更改項目，在網頁加載時所選擇的選項不正確的成本，還發出更多的時候比使用一塊選項。

首先，爲需要包含在定價總計中的每個輸入添加一個類，我在示例中使用了calculation-item。刪除需要*選擇器，這是過度需要你所需要的，也很慢。

var base_price = 300; 
CalculatePrice(); 

$(".calculation-item").click(function() { 
    CalculatePrice(); 
}); 


function CalculatePrice() { 
    var base_cost = base_price; 
    $(".calculation-item:checked").each(function(index) { 
     base_cost += $(this).data("price"); 
    }); 

    $("#final_price").html(base_cost); 
} 

Working fiddle

Answer 2

使用:checked代替：

$(".process_intel_options input:checked").each(function(index) { 
    base_price += $(this).data("price"); 
});