Javascript 用于选择的更改事件的替代选项

我有多个选项供用户选择。在我的实际代码中，他们一次只能选择一个选项（出于某种原因，它在代码段中不起作用）。我所做的是从数据属性中获取价格，并将其写入页面的不同部分

我认为我的问题源于

change

功能。如果用户取消选择他们的选项并单击另一个选项，则会同时接受这两个价格…或者如果用户单击并取消单击同一选项。因此，它可以做到这一点，而不仅仅是一个价格：

$13、$13、$15、$17、$13

如何仅显示活动的已检查数据价格

请忽略

calcTotalPrice（）

函数的错误。这与我的问题无关。谢谢

var calPrice=[]；
var limitCal=1；
$（'.calendar check'）。在（'change'，function（）上{
如果（！this.checked | |$（'.calendar check:checked'）.length可用于将所选元素替换为属性值，并用于将数组转换为字符串。最后将字符串写入html

$('.calendar-check').on('change', function() {
  var str = $('.calendar-check:checked').map(function() {
    return "$" + $(this).data('cal-price');
  }).toArray().join(" ");
  $('#pg-price-review').html(str);
});


$（'.calendar check'）。在（'change'，function（）上{
var str=$（'.calendar check:checked'）.map（函数（）{
返回“$”+$（this.data（'cal-price'）；
}).toArray（）.join（“”）；
$（'pg price review'）.html（str）；
})；

A.
B
C
您可以使用属性值替换所选元素，并使用属性值将数组转换为字符串。最后用html编写字符串

$('.calendar-check').on('change', function() {
  var str = $('.calendar-check:checked').map(function() {
    return "$" + $(this).data('cal-price');
  }).toArray().join(" ");
  $('#pg-price-review').html(str);
});


$（'.calendar check'）。在（'change'，function（）上{
var str=$（'.calendar check:checked'）.map（函数（）{
返回“$”+$（this.data（'cal-price'）；
}).toArray（）.join（“”）；
$（'pg price review'）.html（str）；
})；

A.
B
C
为什么不使用单选按钮？为什么不使用单选按钮？谢谢。只是现在我的总价函数不起作用。函数是：
函数calcTotalPrice（）{var totalPrice=calPrice.reduce（函数（a，b）{return a+b；}，0）+tpPrice.reduce（函数（a，b）{return a+b；}，0）；$（“#package review total”）.html（“$”+totalPrice）；}
…请参阅更新的原始fiddle。@Paul因为我的解决方案与您的解决方案不同，所以我更改了
calcTotalPrice（）
。请参阅它也从这个更改函数
tpPrice>获取一个变量$（'.tp pack check'）。打开（'change'，函数（）{
。你能嵌套更改函数吗？@Paul
tpPrice
数组始终是空的，在代码中未使用。在我展示的示例中，它未使用，但它是我实际代码的重要部分。我基本上有两个部分。Cal和TP。这两个部分都有值选项，其中
totalPrice
计算这两个值。很抱歉，不是n注意这一点。我只是没想到这会干扰总价代码。谢谢。只是现在我的总价函数不起作用。函数是：
function calcTotalPrice（）{var totalPrice=calPrice.reduce（函数（a，b）{return a+b；}，0）+tpPrice.reduce（函数（a，b）{return a+b；}，0）$（“#package review total”）.html（“$”+totalPrice）}
…请参阅更新的原始小提琴。@Paul因为我的解决方案与您的解决方案不同，所以我更改了
calcTotalPrice（）
。请参阅此更改函数
$（“.tp pack check”）中的变量
tpPrice
。on（'change'，函数（）{
。你能嵌套更改函数吗？@Paul
tpPrice
数组始终是空的，在代码中未使用。在我展示的示例中，它未使用，但它是我实际代码的重要部分。我基本上有两个部分。Cal和TP。这两个部分都有值选项，其中
totalPrice
计算这两个值。很抱歉，不是n我只是没想到这会打乱总价代码。