I'm working on an auto calculation form which is a total column will change after a radio and a dropdown is clicked. I can make the total change for both dropdowns but the problem occurs when I tried to add a radio option. Here is my code.
HTML
Ages 10+:
<select id="Adult" name="Adult">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br />Ages 3-9:
<select id="Child" name="Child">
<option selected="selected" value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
</select>
<br />Food
<input type="radio" name="food" id="food0" value="0" />
<label for="food0">No</label>
<input type="radio" name="food" id="food1" value="10" />
<label for="food1">Yes</label>
<table width="100%" border="1" align="center">
<tr>
<td>Product</td>
<td>Ages 10+</td>
<td>Ages 3-9</td>
<td>Food</td>
<td>Price</td>
</tr>
<tr>
<td>2 Day Ticket</td>
<td>$235.00</td>
<td>$223.00</td>
<td><span id="food">0</span>
</td>
<td>$<span class="amount" id="2DayTotal"></span>
</td>
</tr>
<tr>
<td>3 Day Ticket</td>
<td>$301.00</td>
<td>$285.00</td>
<td><span id="food">0</span>
</td>
<td>$<span class="amount" id="3DayTotal"></span>
</td>
</tr>
<tr>
<td>4 Day Ticket</td>
<td>$315.00</td>
<td>$298.00</td>
<td><span id="food">0</span>
</td>
<td>$<span class="amount" id="4DayTotal"></span>
</td>
</tr>
<tr>
<td>5 Day Ticket</td>
<td>$328.00</td>
<td>$309.00</td>
<td><span id="food">0</span>
</td>
<td>$<span class="amount" id="5DayTotal"></span>
</td>
</tr>
</table>
JavaScript
var numAdult = 0;
var numChild = 0;
$("#Adult").change(function () {
numAdult = $("#Adult").val();
calcTotals();
});
$("#Child").change(function () {
numChild = $("#Child").val();
calcTotals();
});
$('input[type=radio]').change(function(evt) {
$('#food').html($(this).val());
});
function calcTotals() {
$("#2DayTotal").text(235 * numAdult + 223 * numChild);
$("#3DayTotal").text(301 * numAdult + 285 * numChild);
$("#4DayTotal").text(315 * numAdult + 298 * numChild);
$("#5DayTotal").text(328 * numAdult + 309 * numChild);
}
The issues are:
I'd like the food column change to it's value when a radio is click. It works only the first id.
After a radio is clicked. A fumction calcTotals() is called to sum an additional food cost.
Demo here : http://jsfiddle.net/4Jegn/178/
Please be advice.
