добавить значения выбранных переключателей и вывести / обработать сумму - PullRequest
Новая
       10

добавить значения выбранных переключателей и вывести / обработать сумму

0 голосов
/ 08 марта 2020

Я хотел бы добавить значения выбранных переключателей и вывести / обработать сумму в конце. У кого-нибудь есть совет, почему следующее не работает? Спасибо тебе от нуба! 

 <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>

1 Ответ

0 голосов
/ 08 марта 2020

Логика c вроде бы в порядке. Пожалуйста, убедитесь, что ваш javascript находится после загрузки jquery. Прямо сейчас у вас есть код в голове и jquery в теле. Попробуйте проверить консоль в инструментах разработчика вашего браузера. Если это проблема, вы увидите ошибку «ReferenceError: $ не определено».

...