使用javascript或jQuery更新两个复选框选择的价格

Question

我需要一种方法来显示具有选择选项的产品的正确价格。 Radio Box 1有4个产品，不同价格ProductA = $ 10，ProductB = $ 20，ProductC = $ 30，ProductD = $ 40

Radio Box 2有两个选项Male and Female

对于女性而言，无论Radio Box 1选择如何，所有产品总是10美元。根据产品选择，男性的价格会有所不同。我需要用js动态显示价格变化。

http://jsfiddle.net/pe2gpp01/

<div><label class="product">Product</label>
<span>
<input name="category" type="radio" value="10">
<label>Product A</label>
<input name="category" type="radio" value="20">
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40">
<label>Product D</label>
</span></div>

<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="">
<label>Male</label>
<input name="gender" type="radio" value="">
<label>Female</label>
</span></div>

<span>Price:</span>

Answer 1

DEMO

HTML

<div>
<label class="product">Product</label>
<span>
<input name="category" type="radio" value="10" >
<label>Product A</label>
<input name="category" type="radio" value="20" checked>
<label>Product B</label>
<input name="category" type="radio" value="30">
<label>Product C</label>
<input name="category" type="radio" value="40" >
<label>Product D</label>
    </span></div>

<div>
<label class="gender">Gender</label>
<span>
<input name="gender" type="radio" value="male" checked>
<label>Male</label>
<input name="gender" type="radio" value="female">
<label>Female</label>
    </span></div>

    <span>Show Price: <span id="price"></span></span>

JS

$(function() {
    $('[type="radio"]').on('change', function() {
        var price = $('[value="female"]')[0].checked
          ? 10 
          : $('[name="category"]:checked').val();

       $('#price').text(price);

    }).change();
});