jQuery - Retrieve values from HTML elements and return their sum

Question

I got a form with several checkbox's where the user can choose multiple values, like so:

<div>
    <input id="myinput1" type="checkbox" value="choice_id_1" />
    <label for="myinput1">5</label>
</div>
<div>
    <input id="myinput2" type="checkbox" value="choice_id_2" />
    <label for="myinput2">10</label>
</div>
<div>
    <input id="myinput3" type="checkbox" value="choice_id_3" />
    <label for="myinput3">10</label>
</div>

I need to get the values from each :selected checkbox label and return their total sum (ie: total = 25).

So far I have been trying to get the strings from the labels with the .text() method, make an array with the results, converting them to int with parseFloat() and sum the array elements... obviosly with no success.

This is what i got (for sure not the best approach so I'm open to diferent solutions):

function totalSum() {
    var prices = $("input:checkbox:checked").siblings("label").text();
    var myArray = $.makeArray(prices);

    var total = 0;
    for(var i = 0; i < myArray.length; i++){
        var thisVal = parseFloat(myArray[i]);
        if(!isNaN(thisVal)){
            total += thisVal;
        }
    };

    $(".mydiv").text(total);
};

totalSum();
$("input:checkbox").change(totalSum);

mr.gadgets · Accepted Answer · 2011-04-29 05:56:13Z

1

the solution is as follow, you can go here to try out the demo

<form id="sum" action="#">
<div><input id="myinput1" type="checkbox" value="choice_id_1" />
<label for="myinput1">5</label></div>
<div><input id="myinput2" type="checkbox" value="choice_id_2" />
<label for="myinput2">10</label></div>
<div><input id="myinput3" type="checkbox" value="choice_id_3" />
<label for="myinput3">10</label></div>
<input class="submit" type="submit" value="Submit" />
<div id="result"></div>
</form>

<script type="text/javascript">
 jQuery(document).ready(function() {
   jQuery('.submit').click(function(event){
     var sum = 0;
     jQuery('form#sum').find(':checkbox').each(function() {
      if (jQuery(this).is(':checked')) {
       var labelVal = parseInt(jQuery(this).next().text());
       sum +=labelVal;
      }
     });
     jQuery('#result').text('The total is ' + sum);
   });
 });
</script>

answered Apr 29, 2011 at 5:56

mr.gadgets

211 bronze badge

Sign up to request clarification or add additional context in comments.

1 Comment

nienn Over a year ago

That solves it perfectly too. I already got my problem solved with the var prices = $("input:checkbox:checked").siblings("label") and then using the rest of @Neal's answer, so no additional markup needed. I'll have to keep @Neal's answer approved as he was the 1st to answer and really solved my problem. Thx for the very enlightening example thought =)

Naftali · Accepted Answer · 2011-04-28 21:36:58Z

0

Well for one thing change the value part of each checkbox to the same as the value of the label (if you can't do that, you can utilize the name attr of the input as shown below):

<div>
    <input id="myinput2" type="checkbox" value="choice_2" name="10"/>
    <label for="myinput2">10</label>
</div>

and then the JS can be like this:

function totalSum() {
    var prices = $("input:checkbox:checked");

    var total = 0;

    $.each(prices, function(index, obj){
        total += parseFloat($(obj).attr('name'));
    })


    $(".mydiv").text(total);
};

edited Apr 28, 2011 at 21:36

answered Apr 28, 2011 at 21:20

Naftali

147k41 gold badges247 silver badges304 bronze badges

2 Comments

nienn Over a year ago

Sorry, thought better not to complicate the question with additional code. Thing is I can't use the value from the checkboxes to do this as I'm already using it to send the results to the database.The value is how I'm identifying the user choosen options. (edited my question)

nienn Over a year ago

Ok. Since i couldn't use the name attr either (sorry for the over simplification) i created a new input [type=hidden] and and duplicated my wanted values (wich i get from php) to this input value attr. Now your first suggestion worked perfectly! Thx =)

Collectives™ on Stack Overflow

jQuery - Retrieve values from HTML elements and return their sum

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related