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を有効にしそうどんな生徒エラーを言い訳に非常に新しいです！

ラジオ（またはチェックボックス）リストからグラフィックスカード、マザーボードなどを選ぶことができるためです。ここで

は私exmpleが生きている：http://genyx.co.uk/CCB/

プロセッサは、現在、それらにdata-priceを持っているだけに注意してください。

Answer 1

ありあなたの例にはいくつかのロジックの問題は、ページのロードで選択したオプションのために間違ったコストは、あなたがアイテムを変更すると無限の価格上昇につながる、あるときよりも発行オプションの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"); 
});