using jQuery to calculate total amount base on checkbox condition-CodePudding

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"  value="5.00" data-amount="5.00">
<label>Offer Two</label>
<input type="checkbox" name="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"  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"  value="5.00" data-amount="5.00">
<label>Other Offer Two 5.00</label>
<input type="checkbox" name="offer"  value="5.00" data-amount="5.00">

https://jsfiddle.net/9fq4d506/

appreciate the help.

CodePudding user response：

I update your jquery code, I tried in jsFiddle and it's working perfect now. Let me know if you need any help.

$(document).ready(function() {
var orderamount = $('#orderamount').val();
$('.single-offer').click(function() {
    if ($('.bundle-offer').is(":checked")) {
        $('.bundle-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");
});

$('.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");        
 });
});

This is the link if you want to test it, https://jsfiddle.net/Mitali5205/xpgr7syq/3/