顯示效果:
HTML頁面:
<table cellpadding="0" cellspacing="0" class="t_center m_table">
<thead>
<tr class="white">
<td ><input type="checkbox" style="margin:0 6px;" id="allSelect" class="allSelect"/></td>
<td >本期應還日期</td>
<td >借款產品</td>
<td >申請編號</td>
<td >本期應還金額(元)</td>
</tr>
</thead>
<tbody>
<tr >
<td >
<input type="checkbox" onclick="calcuAmount()" id="singleSelect" class="singleSelect" name="checkFordis" value="27756" /> </td>
<td >
2016-10-10 </td>
<td >
養豬貸 </td>
<td >
20160830005 </td>
<td >
應還:<span class="fb" id="currentPayment" >3.75</span> (本金:0.00、利息:3.75、
違約金:0.00、罰息:0.00、其他:0.00) </td>
</tr>
<tr >
<td >
<input type="checkbox" onclick="calcuAmount()" id="singleSelect" class="singleSelect" name="checkFordis" value="27884" /> </td>
<td >
2016-10-10 </td>
<td >
養豬貸 </td>
<td >
20160901203 </td>
<td >
應還:<span class="fb" id="currentPayment" >9.75</span> (本金:0.00、利息:9.75、
違約金:0.00、罰息:0.00、其他:0.00) </td>
</tr>
</tbody>
</table>
js代碼(使用了jquery的選擇器$(“#currentPayment”,_parent),獲取子元素):
function calcuAmount(){
var sum = 0 ;
$(".singleSelect").each(function(index,element){
var _parent=$(this).parent().parent();
if($(this).is(':checked')){
var _txt=$("#currentPayment",_parent).text();
sum = sum + parseFloat(_txt);
}
});
$("#sumToShow").html("合計:應還金額" + sum + "元");
}