使用 jQuery，您将如何计算此购物车的最终价格？

Question

使用jQuery，如何计算选中产品data-price乘以所选payment_optionsdata-price-modifier的总和，并在#[=中显示结果17=] div?

<div class="products">
  <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
  <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
  <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
  <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
  <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
  <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

Answer 1

遍历选中的复选框，并将它们的 data-price 属性乘以选中的单选按钮的 data-price-modifier 属性。

$('.products input, .payment_options input').on('change', function() {
  var sum = 0;
  $('.products').find('input:checked').each(function() {
    sum += $(this).data('price') * $('.payment_options').find('input:checked').data('price-modifier');
  });
  $('#final_price').text(sum);
});

Fiddle

Answer 2

像这样：

"use strict";

var calculateTotal = function(ev){

  var subTotal=0, tax=0, total=0;
  $('.products input:checked').each(function(){
    subTotal += parseInt( $(this).data('price') );
  });
  tax = parseFloat($('.payment_options input:checked').data('priceModifier')) || 0;
  total = subTotal * tax;
  $('#final_price').text( total );
  
};

$('input').on('change',calculateTotal);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="products">
  <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
  <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
  <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
  <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
  <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
  <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

Answer 3

var sum = 0;
var modifier;
$('.products input').on('click', function() {
  var price = Number($(this).data('price'));
  if ($(this).is(':checked')) {
    sum += price;
  } else {
    sum -= price;
  }

  if(modifier)
    {
        updateTotal(sum*modifier);

    }
  else
    {
              updateTotal(0);

    }

});

$('.payment_options input').on('click', function() {
  
  modifier=Number($(this).data('price-modifier'));
  updateTotal(sum*modifier);
});

function updateTotal(val)
{
    $('#final_price').html(val);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="products">
  <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
  <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
  <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
  <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
  <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
  <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

https://jsbin.com/lerahi/edit?html,js,console,output 查看实际演示

Answer 4

我的建议是：

$(function () {
  $('input[name="product_ids[]"], input[id^="payment_option_id_"]').on('change', function() {
    var total = 0;
    var datamodifier = 0;
    var selectedPM = $('input[id^="payment_option_id_"]:checked');
    if (selectedPM.length == 1) {
      datamodifier = parseFloat(selectedPM.attr('data-price-modifier'));
      $('input[name="product_ids[]"]:checked').each(function (index, element) {
        total += (parseFloat($(this).attr('data-price')) * datamodifier);
      });
    }
    $('#final_price').text(total);
  });
});

<script src="//code.jquery.com/jquery-1.11.3.js"></script>

<div class="products">
    <input type="checkbox" data-price="1000" value="1" name="product_ids[]" id="product_id_1">
    <input type="checkbox" data-price="1200" value="2" name="product_ids[]" id="product_id_2">
    <input type="checkbox" data-price="1300" value="3" name="product_ids[]" id="product_id_3">
</div>

<div class="payment_options">
    <input type="radio" data-price-modifier="1.0" value="1" name="payment_option_id" id="payment_option_id_1">
    <input type="radio" data-price-modifier="0.9" value="2" name="payment_option_id" id="payment_option_id_2">
    <input type="radio" data-price-modifier="0.8" value="3" name="payment_option_id" id="payment_option_id_3">
</div>

<div id="final_price"></div>

使用 jQuery，您将如何计算此购物车的最终价格？

Using jQuery, how would you calculate the final price of this shopping cart?

jquery

shopping-cart