dimanche 1 mai 2022

using jQuery to calculate total amount base on checkbox condition

I'm trying to calculate total price base on checkboxes and their check / unchecked conditions;

Lets say I have order and total amount

<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">

Then I have 2 checkbox with optional offers

<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">

Then I have a bundle discounted offer, with lower price which override the above 2 offers

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

This far I'm good and can calculate total price base on checkbox checked conditions

<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>

I understand above code is not very decent approach but it does the job.

In last have few more offer checkboxes but these total amount not calculated accurately base on above checkbox price and checked conditions.

<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/

appreciate the help.




Aucun commentaire:

Enregistrer un commentaire