Adding/Subtracting values from a checkbox

Question

I have a check box that is by default, is checked and has a value of $50.00. Now I have thought that, what if the user doesn't want to check that $50.00. So, I'm just gonna ask, how will I automatically add it in my grandtotal, and if it is unchecked it will be deducted from grandtotal?

html

<input type="checkbox" checked value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="checkbox" value="10.00" id="cbx2" /><label>Package A</label><br>
<input type="checkbox" value="20.00" id="cbx3" /><label>Package B</label><br>
<input type="checkbox" value="30.00" id="cbx4" /><label>Package C</label><br>
<input type="checkbox" value="40.00" id="cbx5" /><label>Package D</label><br>
<input type="text" id="grandtotal"/> Total:

script

function grandtotal(){
            var a = 0;
            var b = 0;
            var c = 0;
            var d = 0;
            var e = 0;

            if ($('#cbx1').is(":checked")) {
                a = parseFloat($("#cbx1").val(), 10);
            }
            if ($('#cbx2').is(":checked")) {
                b = parseFloat($("#cbx2").val(), 10);
            }
            if ($('#cbx3').is(":checked")) {
                c = parseFloat($("#cbx4").val(), 10);
            }
            if ($('#cbx4').is(":checked")) {
               d = parseFloat($("#cbx4").val(), 10);
            }
            if ($('#cbx5').is(":checked")) {
               e = parseFloat($("#cbx5").val(), 10);
            }

            var total =  a + b + c + d + e ;

            $('#grandtotal').val('$' + total.toFixed(2));

Can we see the rest of the code, how are you firing grandtotal()? Also, $('#grandtotal').val(total); — atmd
– atmd, Commented Jan 7, 2015 at 13:28
you dont use parseFloat with a base figure, that is exclusively for parseInt. — PlantTheIdea
– PlantTheIdea, Commented Jan 7, 2015 at 13:30
you might be best using a loop: pastebin.com/fGj3kLAt Something like that (not ran so syntax might be off) — atmd
– atmd, Commented Jan 7, 2015 at 13:40

Alex Char · Accepted Answer · 2015-01-07 13:50:18Z

I think you can sum it up to this:

//add change event action on checkbox
$(":checkbox").on("change", function() {
  //change input #grandtotal value according check/uncheck checkboxes
  $("#grandtotal").val(function() {
    //declare a variable to keep the sum of the values
    var sum = 0;
    //using an iterator find and sum the values of checked checkboxes
    $(":checkbox:checked").each(function() {
      sum += ~~$(this).val();
    });
    return sum;
  });
});

//here change the value according on checked checkboxes on DOM ready event
$("#grandtotal").val(function() {
  var sum = 0;
  $(":checkbox:checked").each(function() {
    sum += ~~$(this).val();
  });
  return sum;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" checked value="50.00" id="cbx1" />
<label>Upgrade for $50.00</label>
<br>
<input type="checkbox" value="10.00" id="cbx2" />
<label>Package A</label>
<br>
<input type="checkbox" value="20.00" id="cbx3" />
<label>Package B</label>
<br>
<input type="checkbox" value="30.00" id="cbx4" />
<label>Package C</label>
<br>
<input type="checkbox" value="40.00" id="cbx5" />
<label>Package D</label>
<br>
<input type="text" id="grandtotal" />Total:

Deenadhayalan Manoharan · Accepted Answer · 2015-01-07 13:55:16Z

Try this..

    <input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
    <input type="checkbox" onclick="grandtotal()" value="10.00" id="cbx2" /><label>Package A</label><br>
    <input type="checkbox" onclick="grandtotal()" value="20.00" id="cbx3" /><label>Package B</label><br>
    <input type="checkbox" onclick="grandtotal()" value="30.00" id="cbx4" /><label>Package C</label><br>
    <input type="checkbox" onclick="grandtotal()" value="40.00" id="cbx5" /><label>Package D</label><br>
    <input type="text" id="grandtotal"/> Total:




function grandtotal(){
            var a = 0;
            var b = 0;
            var c = 0;
            var d = 0;
            var e = 0;

            if ($('#cbx1').is(":checked")) {
                a = parseFloat($("#cbx1").val(), 10);
            } else {

                a=0;
            }
            if ($('#cbx2').is(":checked")) {
                b = parseFloat($("#cbx2").val(), 10);
            }else {

                b=0;
            }
            if ($('#cbx3').is(":checked")) {
                c = parseFloat($("#cbx4").val(), 10);
            }else {

                c=0;
            }
            if ($('#cbx4').is(":checked")) {
               d = parseFloat($("#cbx4").val(), 10);
            }else {

               d=0;
            }
            if ($('#cbx5').is(":checked")) {
               e = parseFloat($("#cbx5").val(), 10);
            }else {

                e=0;
            }

            var total =  a + b + c + d + e ;

            $('#grandtotal').val('$' + total.toFixed(2));
}

Suchit kumar · Accepted Answer · 2015-01-07 13:33:08Z

0

you can do this:use onclick

function grandtotal(){
    var a = 0;

    if ($('#cbx1').is(":checked")) {
        a = parseFloat($("#cbx1").val(), 10);
    }

    var total =  a + 10.00 ;

    $('#grandtotal').val('$' + total.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" value="50.00" id="cbx1" onclick="grandtotal()"/><label>Upgrade for $50.00</label><br>
Total:<input type="text" id="grandtotal" readonly/>

answered Jan 7, 2015 at 13:33

Suchit kumar

11.9k3 gold badges26 silver badges46 bronze badges

1 Comment

user4158463 Over a year ago

i forgot that it is checked by default, so what I want is the value will be shown in the grandtotal and it will be added with the other values, if the user decides not to check it, the value 50.00 will not be added with the other values.

Rakesh_Kumar · Accepted Answer · 2015-01-07 13:38:06Z

0

$("#cbx1").click(function () {
    if ($('#cbx1').is(":checked")) {
        a = parseFloat($("#cbx1").val(), 10);
        var total =  a + 10.00 ;

    $('#grandtotal').val('$' + total.toFixed(2));
    }
    else{
        $('#grandtotal').val('$'+10);
    }
});

<input type="checkbox"  value="50.00" id="cbx1" /><label>Upgrade for $50.00</label><br>
<input type="text" id="grandtotal"/> Total:

answered Jan 7, 2015 at 13:38

Rakesh_Kumar

1,4621 gold badge17 silver badges30 bronze badges

Comments

atmd · Accepted Answer · 2015-01-07 13:42:20Z

0

How about simply looping through the checkboxes rather then checking indiviually?

    grandTotal () {
        var $packages = $('input:checked'),
            total;

        $packages.each(function(i, package){
             total += $(package).val();
        });

        $('#grandtotal').val('$' + total);
    }

Then call grandTotal as and when you need to update the price

answered Jan 7, 2015 at 13:42

atmd

7,5003 gold badges35 silver badges64 bronze badges

Comments

Peter Healy · Accepted Answer · 2015-01-07 13:45:35Z

0

Edit:I see you now say the text box is checked by default. So just have a onLoad function that calls your total calculations.

then:

Add an onclick attribute to the Checkbox that calls the grandtotal function.

<input type="checkbox" onclick="grandtotal()" value="50.00" id="cbx1" />

See JSFiddle here

edited Jan 7, 2015 at 13:45

answered Jan 7, 2015 at 13:31

Peter Healy

2231 silver badge9 bronze badges

Comments

getty_advaanz · Accepted Answer · 2015-01-07 13:59:45Z

Can you please check below jsfiddle link,

http://jsfiddle.net/5udtC/7788/

Change the script code as follows,

$(document).ready(function () {
$("input").click(function () {
     var a = 0;
        var b = 0;
        var c = 0;
        var d = 0;
        var e = 0;
       if ($('#cbx1').is(":checked")) {
            a = parseFloat($("#cbx1").val(), 10);
        }
        if ($('#cbx2').is(":checked")) {
            b = parseFloat($("#cbx2").val(), 10);
        }
        if ($('#cbx3').is(":checked")) {
            c = parseFloat($("#cbx4").val(), 10);
        }
        if ($('#cbx4').is(":checked")) {
           d = parseFloat($("#cbx4").val(), 10);
        }
        if ($('#cbx5').is(":checked")) {
           e = parseFloat($("#cbx5").val(), 10);
        }
        var total =  a + b + c + d + e ;
        $('#grandtotal').val('$' + total.toFixed(2));
});

 });

Hope this helps you..Thank you.

Raphaël VO · Accepted Answer · 2021-02-14 21:59:58Z

0

Try like this...

       $("#cbx1").click(function () {
            var chk = $("#cbx1").val();
            var total = 0;
            if ($("#cbx1").prop("checked") == true) {
                var gtotal = parseInt(total) + parseInt(chk);
    
            } else {
                var gtotal = parseInt(total);
    
            }
            $("#grandtotal").val(gtotal);
        });

DEMO

edited Feb 14, 2021 at 21:59

Raphaël VO

2,6704 gold badges22 silver badges34 bronze badges

answered Jan 7, 2015 at 13:41

dsn

672 silver badges11 bronze badges

Collectives™ on Stack Overflow

Adding/Subtracting values from a checkbox

8 Answers 8

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related