CODEWITHSUNDEEP
javascripthtml
user4158463
user4158463

Reputation:

Adding/Subtracting values from a checkbox

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

Upvotes: 4

Views: 2973

Answers (8)

dsn
dsn

Reputation: 67

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

Upvotes: 0

getty_advaanz
getty_advaanz

Reputation: 31

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.

Upvotes: 0

Deenadhayalan Manoharan
Deenadhayalan Manoharan

Reputation: 5444

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));
}

Upvotes: 1

Alex Char
Alex Char

Reputation: 33218

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:

Upvotes: 9

Peter Healy
Peter Healy

Reputation: 223

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

Upvotes: 0

atmd
atmd

Reputation: 7490

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

Upvotes: 0

Rakesh_Kumar
Rakesh_Kumar

Reputation: 1442

$("#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:

Upvotes: 0

Suchit kumar
Suchit kumar

Reputation: 11859

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

Upvotes: 0

Related Questions