Having a JavaScript code that calculates the total price based on radio/checkbox selection.
JQUERY
var price = 0;
$('.price-input').click(function () {
if ($(this).is(":checked")) {
price += parseInt($(this).attr("data-price"), 10);
$('.total-price').text(price);
$('.total-price-input').val(price);
} else {
price -= parseInt($(this).attr("data-price"), 10);
$('.total-price').text(price);
$('.total-price-input').val(price);
}
});
The HTML consists of 3 radiobuttons and 3 checkboxes. The radiobutton has a set price, while the checkboxes can add their prices to the selected radiobutton for a total price calculation.
<input class="price-input" data-price="2000" id="ChosenLane" name="ChosenLane" type="radio" value="Conference - Track 1: Lean">
<input class="price-input" data-price="1300" id="ChosenLane" name="ChosenLane" type="radio" value="Conference - Track 2: Innovation">
<input class="price-input" data-price="1600" id="ChosenLane" name="ChosenLane" type="radio" value="Cake">
<input type="checkbox" name="lanes" value="Evening buffet" data-price="1000" class="price-input">
<input type="checkbox" name="lanes" value="xyz" data-price="5456" class="price-input">
<input type="checkbox" name="lanes" value="abc" data-price="54545" class="price-input">
The current setup adds the price each time a radiobutton is clicked, even if it's already selected. I want the radiobuttons to use just their own price when selected, without adding multiple times to the total.
For example, selecting a radiobutton should add its specific price to the total. If another radiobutton is selected, it should subtract the previous price and add the new one.