使用 jQuery 根据复选框条件计算总金额

Question

我正在尝试根据复选框及其勾选/未勾选条件计算总价；

假设我有订单和总金额

<label>Order Amount</label>
<input type="text" name="orderamount" id="orderamount" value="20.00">
<label>Total Amount</label>
<input type="text" name="totalamount" id="totalamount" value="20.00">

然后我有 2 个带有可选优惠的复选框

<label>Offer One</label>
<input type="checkbox" name="offer" class="offer single-offer" value="5.00" data-amount="5.00">
<label>Offer Two</label>
<input type="checkbox" name="offer" class="offer single-offer" value="5.00" data-amount="5.00">

然后我有一个捆绑折扣优惠，价格低于上述 2 个优惠

<label>Bundle Offer</label>
<input type="checkbox" name="offer" class="offer bundle-offer" value="8.00" data-amount="8.00">

到目前为止我还不错，可以根据复选框选中的条件计算总价

<script>
$(document).ready(function() {
    var orderamount = $('#orderamount').val();
    $('.single-offer').click(function() {
        if ($('.bundle-offer').is(":checked")) {
            $('.bundle-offer').prop("checked", false);
            $('#totalamount').val(orderamount).trigger("change");
        }
        var charges = $(this).data("amount");
        var amount = $('#totalamount').val();
        if ($(this).is(":checked")) {
            var totalamount = (parseFloat(amount) + parseFloat(charges)).toFixed(2);
            $('#totalamount').val(totalamount).trigger("change");
        } else if ($(this).is(":not(:checked)")) {
            var totalamount = (parseFloat(amount) - parseFloat(charges)).toFixed(2);
            $('#totalamount').val(totalamount).trigger("change");
        }
    });

    $('.bundle-offer').click(function() {
        if ($('.single-offer').is(":checked")) {
            $('.single-offer').prop("checked", false);
            $('#totalamount').val(orderamount).trigger("change");
        }
        var charges = $(this).data("amount");
        if ($(this).is(":checked")) {
            var totalamount = (parseFloat(orderamount) + parseFloat(charges)).toFixed(2);
            $('#totalamount').val(totalamount).trigger("change");
        } else if ($(this).is(":not(:checked)")) {
            $('#totalamount').val(orderamount).trigger("change");
        }
    });
});
</script>

我知道上面的代码不是很好的方法，但它完成了工作。

最后有几个报价复选框，但这些总金额未根据上述复选框价格和选中条件准确计算。

<label>Other Offer One 5.00</label>
<input type="checkbox" name="offer" class="offer other-offer" value="5.00" data-amount="5.00">
<label>Other Offer Two 5.00</label>
<input type="checkbox" name="offer" class="offer other-offer" value="5.00" data-amount="5.00">

https://jsfiddle.net/9fq4d506/

感谢您的帮助。

Answer 1

我更新了您的 jquery 代码，我在 jsFiddle 中尝试过，它现在运行良好。如果您需要任何帮助，请告诉我。

$(document).ready(function() {
var orderamount = $('#orderamount').val(); // get order amount
$('.single-offer').click(function() {
    if ($('.bundle-offer').is(":checked")) {
        $('.bundle-offer').prop("checked", false);
    }
    var totalCount = orderamount;
    $('input:checkbox:checked').each(function() { // get all checked checkboxes
      totalCount = (parseFloat(totalCount) + parseFloat($(this).data("amount"))).toFixed(2); // orderamount + checked data amount
    });
    $('#totalamount').val(totalCount).trigger("change"); // assign total value
});

$('.bundle-offer').click(function() {
    if ($('.single-offer').is(":checked")) {
        $('.single-offer').prop("checked", false);
    }
    var totalCount = orderamount;
    $('input:checkbox:checked').each(function() {
      totalCount = (parseFloat(totalCount) + parseFloat($(this).data("amount"))).toFixed(2);
    });
    $('#totalamount').val(totalCount).trigger("change");
});

$('.other-offer').click(function() {
         var totalCount = orderamount;
    $('input:checkbox:checked').each(function() {
      totalCount = (parseFloat(totalCount) + parseFloat($(this).data("amount"))).toFixed(2);
    });
    $('#totalamount').val(totalCount).trigger("change");        
 });
});

这是link如果你想测试一下， https://jsfiddle.net/Mitali5205/xpgr7syq/3/

每当您单击任何按钮时，我只会获取所有选中的复选框并获取订单金额，之后我会将所有选中的复选框的金额添加到订单金额并将其显示为总金额。

如果你不明白，请告诉我。

使用 jQuery 根据复选框条件计算总金额

using jQuery to calculate total amount base on checkbox condition

checkbox

jquery