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);
});
});
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?
Thanks in Advance
Advertisement
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(...
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();