Reputation: 45
i have checkbox with value(value is from database), i want to calculate the total fee and display it at Total Amount(below the table).Total Amount will auto update when user selected or unselect it.
<LayoutTemplate>
<table border="1" cellpadding="4" cellspacing="0" class="table-grid2" width="100%">
<tr style="background-color:#CCE1FF;">
<thead>
<td style="width:1%;" class="line_table_thL"><input type="checkbox" value="" onclick="check_chkItems_toggle(this, 'chkbox');" /></td>
<th class="line_table_th" style="width:1%;">No.</th>
<th class="line_table_th" style="width:6%;">Waybill No.</th>
<th class="line_table_th" style="width:4%;">Service Type</th>
<th class="line_table_th" style="width:5%;">Delivered/Received Date</th>
<th class="line_table_th" style="width:4%;">Total Fee</th>
<th class="line_table_th" style="width:4%;">Postal Status</th>
<th class="line_table_th" style="width:4%;">Register By</th>
</tr>
</thead>
<tbody>
<tr runat="server" id="itemPlaceholder">
</tr>
</tbody>
</LayoutTemplate>
<ItemTemplate>
<td class="line_table_tdL"><input type="checkbox" name="chkbox" value="<%# Eval("postal_id") %>" /></td>
<td class="line_table_td"><%# Eval("RowNum") %> </td>
<td class="line_table_td"><%# Eval("WAYBILL_NO") %> </td>
<td class="line_table_td"><%# Eval("POSTAL_TYPE") %> </td>
<td class="line_table_td"><%# Eval("SR_DATE") %> </td>
<td class="line_table_td"><%# Eval("TOTAL_FEE") %> </td>
<td class="line_table_td"><%# Eval("STATUS") %> </td>
<td class="line_table_td"><%# Eval("REG_ID") %> </td>
</tr>
</ItemTemplate>
<td>Total Amount : <span id="total"> </span></td>
my jquery :
function calculate(item) {
var total = 0;
if (item.checked) {
total += parseInt(item.TOTAL_FEE);
} else {
total -= parseInt(item.TOTAL_FEE);
}
//alert(total);
document.getElementById('Totalcost').innerHTML = total + " /-";
}
Upvotes: 1
Views: 1301
Reputation: 82241
You can use:
$('.table-grid2 input').change(function(){
var total = 0;
$('.table-grid2 input').each(function() {
if (this.checked)
{
total += parseInt(this.value);
}
});
$('#total').html(total);
});
Upvotes: 2