Skip to content
Advertisement

Get the Sum of checked checkbox for each row of table

I want to get the sum total of check box for each row in a table

Javascript : For Sum

        $('input[type="checkbox"]').change(function() 
      {
            var total = 0;
        $('#mytable tr').each(function()
      {
            total += parseInt($(this).val());    
        $(this).parents('tr').find('input[type=text]:last').val(total);
      }); 
     });

Javascript : For Count

        $('input[type="checkbox"]').change(function() {
        $('#mytable tr').each(function() {
           var count = $(this).find(':checkbox:checked').length;
         $(this).find('#count').val(count);
       });
       });

This is My Result:

My HTML:

               <div class="container">
               <div class="row">
               <div class="col-md-2">
                <?php
                    $i=1;
                    $sql="select namefrom
    `student` where EXTRACT(YEAR FROM colRegisteredDate)= 2015";
                    $result = mysql_query($sql) or die(mysql_error()); 
                    $data=array();
                ?>
                 <table id="mytable" style="width:100%;">
                    <tr align="center" >
                        <th style="padding:2.5px;
                          width: 10%;" rowspan="2">S.NO</th>
                     <th style="padding:2.5px; 
                          width: 55%;" rowspan="2">StudentID</th>
                     <th style="padding:2.5px;" 
                          colspan="5" style="text-align:center;">subject</th>
                     <th style="padding:2.5px;" rowspan="2">Sum</th>
                        </tr>
                        <tr>
                     <th>s1 <input type="checkbox" 
                         id="selectAll" onclick="SelectAll(this)" /></th>
                     <th>s2 <input type="checkbox" 
                         id="selectAll" onclick="SelectAll(this)"/></th>
                     <th>s3 <input type="checkbox" 
                         id="selectAll"onclick="SelectAll(this)" /></th>
                     <th>s4 <input type="checkbox"
                          id="selectAll" onclick="SelectAll(this)" /></th>
                     <th>s5 <input type="checkbox" 
                          id="selectAll" onclick="SelectAll(this)"/></th>
                    </tr>
                        <li>
                           <?php
                              while ($row = mysql_fetch_array($result)){
                                
                              //$row = mysql_fetch_assoc($result); 
                              $data[]=$row['name'];
                              $number=$row['name'];
                              $_SESSION['Roll']=$number;
                              $str = implode("n", $data);
                              $_SESSION['value']=$number;
                              $_SESSION['url']="index.php?StudentID=$number";
                              ?>
                           <?php
                              ?>
                           <tr>
                              <td><?php echo $i; ?></td>
                              <td><a href="#" data-id='
                 <?php echo $number; ?>' class="link" id="link">  
                                 <?php
                                    echo  "$number";
                                    ?>
                        </li>
                        </a></td>
                        <td><input type="checkbox" name="checkbox"
               id="a" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
               id="b" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
              id="c" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
              id="d" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input type="checkbox" name="checkbox"
              id="e" class="sum" value="10" data-toggle="checkbox"><br></td>
                        <td><input  type="text" id="total"><br></td>
                        </tr>
                     </table>
                  </div>
                  <?php $i=$i+1; }?>
               </div>
            </div>

 

In the First image when i click Select All ,it shows 1 in paper count and 10 in sum column. Then,when i click Select All for second time paper count increase in correct way but no change in sum column.I want to know,How to write for each function . I want to sum the checked checkbox value when selected indiviually and when select by Select All Option

Update:

I got Half of my result :

        $(document).ready(function()
      {  
        $('input[type="checkbox"]').change(function()
      {
               var total=0;
        $(this).parents("tr").children("td").
          find('input[type=checkbox]:checked').each(function(){ 
                total +=parseInt($(this).val());
        $(this).parents('tr').find('input[type=text]:last').val(total);
      });
      });
      }); 

Now the Only Problem is the above code Not sum the row value ,when i Click Select All.Any Help For this issue?

Updated Fiddle

Thanks in Advance

Answer

$(this).parents("tr").children("td").find('input[type=checkbox]:checked')

When you tick the checkall checkbox, it will be matched by this selector. It doesn’t have an explicit value set, so .val() will return the string "on".

Obviously, the string "on" cannot be converted to an integer, so your total will become NaN.

Exclude the .checkall checkbox from your selector, and your code will work.

$(this).parents('tr').find(':checkbox:checked').not(".checkall").each(...

Updated fiddle

NB: You should also pay attention to the jQuery documentation$(document).ready(fn) has been deprecated since v3. Use $(fn) instead.


Edit: Based on your updated Fiddle posted on CodeProject, you just need to trigger the change event of your checkbox after you’ve updated it from the SelectAll function:

table.find('td:nth-child(' + columnIndex + ') input').prop("checked", obj.checked).change();

Fixed updated Fiddle

Advertisement