选择的更改事件的替代方法

Question

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

我认为我的问题源于 change 函数。如果用户取消选择他们的选项并点击另一个选项，它会同时使用这两个价格……或者如果他们点击并取消点击相同的选项。因此，与其只有一个价格，不如这样做：

13 美元、13 美元、15 美元、17 美元、13 美元

如何才能只显示当前选中的数据价格？

请忽略 calcTotalPrice() 函数的错误。这与我的问题无关。谢谢

var calPrice = [];
var limitCal = 1;
$('.calendar-check').on('change', function() {
  if (!this.checked || $('.calendar-check:checked').length <= limitCal) {
    $('.calendar-check:checked').each(function() {
      calPrice.push($(this).data('cal-price'));
    });
    $('#pg-price-review').html("$ " + calPrice);
    calcTotalPrice();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
A
<input type="checkbox" class="calendar-check" data-cal-price="13" id="cal-glance" value="At-A-Glance Calendar"> 
B
<input type="checkbox" class="calendar-check" data-cal-price="15" id="cal-glance" value="At-A-Glance Calendar"> 
C
<input type="checkbox" class="calendar-check" data-cal-price="17" id="cal-glance" value="At-A-Glance Calendar">

<p id="pg-price-review" class="small-description margin15"></p>

Answer 1

您可以使用.map() to replace selected element with attribute value and use Array.prototype.join() 将数组转换为字符串。最后在 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').on('change', function() {
  var str = $('.calendar-check:checked').map(function() {
    return "$" + $(this).data('cal-price');
  }).toArray().join(" ");
  $('#pg-price-review').html(str);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
A<input type="checkbox" class="calendar-check" data-cal-price="13" id="cal-glance" value="At-A-Glance Calendar"> 
B<input type="checkbox" class="calendar-check" data-cal-price="15" id="cal-glance" value="At-A-Glance Calendar"> 
C<input type="checkbox" class="calendar-check" data-cal-price="17" id="cal-glance" value="At-A-Glance Calendar">
<p id="pg-price-review" class="small-description margin15"></p>

选择的更改事件的替代方法

Alternative to on change event for selections

javascript

jquery

onchange

custom-data-attribute