Add and subtract values with jQuery

Question

Need Help with following piece of jQuery code;

What I'm trying to do is;

1. add Amount into Total
2. when amount added Checkbox value get double
3. If checkbox state change, checkbox Updated value minus or add into Total accordingly
4. if Amount minus from Total, checkbox value change back to original
5. If checkbox state change, checkbox Updated value minus or add into Total accordingly

Following is the piece of jQuery Code

$('#Addcar').on('click', function() {
if($(this).html()=='Add') {
    $(this).html('Remove');
    var tot = parseFloat($('#TotalAmount').val()) + parseFloat($('#QuoteAmount').val());
    var totcan = parseFloat($('#Cancelation').val()) + 2;
    $('#TotalPrice').val(tot);
    $('#Cancelation').val(totcan);
} else {
    $(this).html('Add');
    var tot = parseFloat($('#TotalPrice').val()) - parseFloat($('#QuoteAmount').val());
    var totcan = parseFloat($('#Cancelation').val()) - 2;
    $('#TotalPrice').val(tot);
    $('#Cancelation').val(totcan);
}
});

$('#Cancelation').change(function(){
if($(this).is(':checked')){
    total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
} else {
    total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
}
$('#TotalPrice').val(total);
});

Here is the fiddle which explains better;

Updated Fiddle:
http://jsfiddle.net/55n8acus/7/

If QuoteAmount value added and checkbox value remove from Total and then remove QuoteAmount value , the result value will be wrong, it should be 52 not 48, the reason checkbox won't update and it still remove 4 from Total instead it should remove 2.

Thanks for all the help

Regards.

Answer 1

What I can understand from the question is that you want to subtract the value from total price, but you are accidentally using #TotalValue instead of #TotalPrice when you click on the checkbox, change the code to this, it will work as expected.

$('#Cancelation').change(function(){
if($(this).is(':checked')){
    total = parseFloat($('#TotalPrice').val()) + Number($(this).val());
} else {
    total = parseFloat($('#TotalPrice').val()) - Number($(this).val());
}
$('#TotalPrice').val(total);
});

here is the updated js fiddle :- jsfiddle.net/55n8acus/8

 $('#Addcar').on('click', function() { if($(this).html()=='Add') { $(this).html('Remove'); var tot = parseFloat($('#TotalAmount').val()) + parseFloat($('#QuoteAmount').val()); var totcan = parseFloat($('#Cancelation').val()) + 2; if(!$("#Cancelation").is(':checked')){ tot = tot -4; } $('#TotalPrice').val(tot); $('#Cancelation').val(totcan); $('#Cancel').html(totcan); } else { $(this).html('Add'); var tot = parseFloat($('#TotalPrice').val()) - parseFloat($('#QuoteAmount').val()); if(!$("#Cancelation").is(':checked')){ tot +=2; } var totcan = parseFloat($('#Cancelation').val()) - 2; $('#TotalPrice').val(tot); $('#Cancelation').val(totcan); $('#Cancel').html(totcan); } }); $('#Cancelation').change(function(){ if($(this).is(':checked')){ total = parseFloat($('#TotalPrice').val()) + Number($(this).val()); } else { total = parseFloat($('#TotalPrice').val()) - Number($(this).val()); } $('#TotalPrice').val(total); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="javascript:;" id="Addcar">Add</a><br> <input type="text" id="QuoteAmount" value="50" /> <input type="text" name="TotalAmount" id="TotalAmount" value="52" /><br> <input type="text" name="TotalPrice" id="TotalPrice" value="0" /><br> <input type="checkbox" id="Cancelation" value="2" checked> <span id="Cancel">2</span>