Seeking help to troubleshoot my code! I want to calculate the sum of selected radio button values and display it at the end. Can anyone assist me with this issue? Thanks in advance!
<html>
<head>
</head>
<script type="text/javascript">
function calcPrice() {
var price = 0;
$("input[type=radio][data-price]:checked").each(function(i, el) {
price += +$(el).data("price");
});
$("#price").text(price);
}
$("input[type=radio]").on("change", calcPrice);
calcPrice();
</script>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Group 1:</p><ol>
<label><li><input type="radio" name="group1" checked>Item 1 (frei)</li></label>
<label><li><input type="radio" name="group1" data-price="1">Item 2 (€1)</li></label>
<label><li><input type="radio" name="group1" data-price="2">Item 3 (€2)</li></label>
<label><li><input type="radio" name="group1" data-price="3">Item 4 (€3)</li></label>
</ol>
<p>Group 2:</p><ol>
<label><li><input type="radio" name="group2" data-price="20" checked>Another item 1 (€20)</li></label>
<label><li><input type="radio" name="group2" data-price="0">Another item 2 (frei)</li></label>
<label><li><input type="radio" name="group2" data-price="5">Another item 3 (€5)</li></label>
<label><li><input type="radio" name="group2" data-price="10">Another item 4 (€10)</li></label>
</ol>
<p>Total: €<span id="price">--.--</span></p>
</body>
</html>