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

Question

I need a way to show correct price for a product with selection options. Radio Box 1 has 4 products with different price ProductA=$10, ProductB=$20, ProductC=$30, ProductD=$40

Radio Box 2 has two options Male and Female

For female all products are always $10 regardless of Radio Box 1 selection. Price varies for men depending on product choice. I need to show price change dynamically with 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();
});