Question

每次选中任何复选框时，我都希望将data-price属性与与复选框关联的输入字段的值相乘。我需要计算所有这些乘法的总和。

HTML：

<input class="selectproduct" type="checkbox" name="item0" data-price="5"/>First 
<input type="text" class="qty0" name="qty0"/>
<br/>
<input class="selectproduct" type="checkbox" name="item1" data-price="7"/>Second 
<input type="text" class="qty1" name="qty1"/>
<br/>
Total Price: $<span class="price">0</span>

JS：

$('.selectproduct').on("change", function () {
    var totalPrice = 0;

    $('.selectproduct:checked').each(function () {
        totalPrice += parseInt($(this).data('price'), 10);
    });

    $('.price').html(totalPrice);
});

我目前能够根据复选框对价格求和，但是无论何时发生变化，我都无法弄清楚如何将其与相关的输入字段相乘。每当输入字段发生变化时，如何不断更新总和？

这里是小提琴：https://jsfiddle.net/600rzptn/

Answer 1

你可以这样做。

$('.selectproduct').change(function() {
  var totalPrice = 0;

  $('.selectproduct:checked').each(function() {
    totalPrice += $(this).data('price') * $(this).next('input').val();
  });

  $('.price').html(totalPrice);
});

//to change total price on changing textbox value
$('input[type="text"]').keyup(function() {
  $('.selectproduct:first').change();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="selectproduct" type="checkbox" name="item0" data-price="5" />First
<input type="text" name="qty0" />
<br/>
<input class="selectproduct" type="checkbox" name="item1" data-price="7" />Second
<input type="text" name="qty1" />
<br/> 
Total Price: $<span class="price">0</span>

Answer 2

将您的计算行更改为：

totalPrice += parseInt($(this).data('price'), 10) * $(this).next().val();

<强> jsFiddle example

将复选框数据属性与输入值相乘

2 个答案: