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

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.

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

• javascript
• jquery
• html
• checkbox

• And whats the problem ? – adeneo Commented Jun 5, 2015 at 21:50
• values not added or minus accordingly. – Shehary Commented Jun 5, 2015 at 21:51
• Just clicking the button in the fiddle, it seems to work for me ? – adeneo Commented Jun 5, 2015 at 21:55
• if add, total is 102 and if checkbox uncheck total value change to 48 but it should change to 98. – Shehary Commented Jun 5, 2015 at 21:58
• @shehary It's 48 because you subtract ("TotalAmount" - checkbox value), which is (52 - 4) = 48. Maybe you want to subtract (TotalPrice - checkbox value) instead. – Ahmad Ibrahim Commented Jun 5, 2015 at 22:23

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