Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: HTML jQuery
How to get sum of html element's values with specific class names in the multiple divs have same class name.
<html>
<link REL="STYLESHEET" TYPE="text/css" HREF="checkoperations.css">
 

<script type="text/javascript" src="jquery.js"/>&lt;/script>
<script type="text/javascript" src="checkoperations.js"></script>
<body>
 
<input type="button" id="calculate" value="calculate"/>
<div class="testdiv">
      <input type='checkbox' name='checked2' value='check' class='ckbox'>
      <input type='text' class ='fieldsbankrecon1' readonly='readonly' value='7'/>
      <input type='text' class ='fieldsbankrecon' readonly='readonly' value='8'/>
 
</div>
 
<div class="testdiv"  >
      <input type='checkbox' name='checked' value='check' class='ckbox'>
      <input type='text' class ='fieldsbankrecon1' readonly='readonly' value='1' />
      <input type='text' class ='fieldsbankrecon2' readonly='readonly' value='2' />
 
</div>
 

<div class="testdiv"  >
      <input type='checkbox' name='checked' value='check' class='ckbox'>
      <input type='text' class ='fieldsbankrecon1' readonly='readonly' value='1' />
      <input type='text' class ='fieldsbankrecon2' readonly='readonly' value='2' />
 
</div>
 
<div class="testdiv"  >
      <input type='checkbox' name='checked' value='check' class='ckbox'>
      <input type='text' class ='fieldsbankrecon1' readonly='readonly' value='1' />
      <input type='text' class ='fieldsbankrecon2' readonly='readonly' value='2' />
 
</div>
 
<body>
 
</html>
jQuery code
var sum = 0;
$('#calculate').click(function()
    {
 
    $('.testdiv').each(function() {
    //var $this = $(this);
    //if ($this.is(':checked')) {
        var currentValue = parseInt($(".fieldsbankrecon1").val(),10);
        sum = sum  + currentValue;
        //}
         alert(message);
 
    });
Message is always 7 which is the first text box in the first div.
It's iterating four times though, but I don't know why the value is not changing.
 
I guess my message is not completely shown here. My HTML code has four divs with same class name that is testdiv and inside each div there are three input boxes.
 
I would really appreciate the help.
Posted 16-Jan-13 8:25am
Edited 16-Jan-13 8:33am
v4

1 solution

Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

You would want to do something like this:
var sum = 0;        
$(".fieldsbankrecon1").each(function() 
{ 
  if(!isNaN(this.value) && this.value.length!=0) 
  {
    sum += parseFloat(this.value);            
  }         
});
 
Update
Add the following div to the body of your document
    <div id="output">
 
    </div>
This script will automatically recalculate the sum as the user checks and unchecks the checkboxes:
<script>
    var evaluateFields = function ()
    {
 
        var sum = 0;
        var n = $("input:checked").each(function ()
        {
            $(this).parent().find(".fieldsbankrecon1").each(function ()
            {
                sum += parseFloat(this.value);
            });
        });
        $("#output").text("Sum:"+sum);
    };
    evaluateFields();
 
    $("input[type=checkbox]").on("click", evaluateFields);
 
</script>
 
You can also add multiple fields with the appropriate class to each of your divs.
 
Best regards
Espen Harlinn
  Permalink  
v2
Comments
Sk. Tajbir at 16-Jan-13 16:01pm
   
nice 5+
Espen Harlinn at 16-Jan-13 16:02pm
   
Thank you, Sk. Tajbir :-D
ankitrishi8584 at 16-Jan-13 16:46pm
   
Thanks for the help Espen but what if I want to add the value of .fieldsbankrecon1 class only for the divs whose checkboxes are checked.
 
for example I have four divs and three of them have their checkboxes checked and I want my code pick those three divs.
ankitrishi8584 at 16-Jan-13 17:43pm
   
Thanks I appreciate the help.
Would be thankful for the query I have

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
0 Sergey Alexandrovich Kryukov 495
1 OriginalGriff 339
2 ChintanShukla 305
3 Richard Deeming 260
4 RyanDev 230
0 Sergey Alexandrovich Kryukov 8,768
1 OriginalGriff 7,387
2 CPallini 2,603
3 Richard MacCutchan 2,095
4 Abhinav S 1,893


Advertise | Privacy | Mobile
Web03 | 2.8.140827.1 | Last Updated 16 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100