HTML:
<div class="pre_infoWrap">
<div class="pre_dateWrap bg">
<div class="pre_date">2017年9月</div>
<div class="pre_oneInfoWrap">
<div class="pre_oneInfo">
<div class="pre_oneCheck">
<img src="img/borrowChecking.png" alt="">
</div>
<div class="pre_oneWarp">
<div class="pre_oneWarpTop">
<div class="pre_oneMidText">待还<span>3000</span>元</div>
<div class="pre_oneMidTip pre_oneMidTipRed">已逾期</div>
<div class="pre_oneMidPic"><img src="img/returnRight.png" alt=""></div>
</div>
<div class="pre_oneWarpBottom">
<div>9-4 17:33:27</div>
<div class="preBorrowTotal">借款 <span>3000.00</span>元</div>
<p class="preBorrowWeek">剩余 <span>1</span> 期</p>
</div>
</div>
</div>
<div class="pre_oneInfo">
<div class="pre_oneCheck">
<img src="img/borrowCheck.png" alt="">
</div>
<div class="pre_oneWarp">
<div class="pre_oneWarpTop">
<div class="pre_oneMidText">待还<span>3000</span>元</div>
<div class="pre_oneMidTip pre_oneMidTipBlue">还款中</div>
<div class="pre_oneMidPic"><img src="img/returnRight.png" alt=""></div>
</div>
<div class="pre_oneWarpBottom">
<div>9-4 17:33:27</div>
<div class="preBorrowTotal">借款 <span>3000.00</span>元</div>
<p class="preBorrowWeek">剩余 <span>1</span> 期</p>
</div>
</div>
</div>
<div class="pre_oneInfo">
<div class="pre_oneCheck">
<img src="img/borrowCheck.png" alt="">
</div>
<div class="pre_oneWarp">
<div class="pre_oneWarpTop">
<div class="pre_oneMidText">待还<span>3000</span>元</div>
<div class="pre_oneMidTip pre_oneMidTipBlue">已放款</div>
<div class="pre_oneMidPic"><img src="img/returnRight.png" alt=""></div>
</div>
<div class="pre_oneWarpBottom">
<div>9-4 17:33:27</div>
<div class="preBorrowTotal">借款 <span>3000.00</span>元</div>
<p class="preBorrowWeek">剩余 <span>1</span> 期</p>
</div>
</div>
</div>
</div>
</div>
<div class="pre_dateWrap bg">
<div class="pre_date">2017年10月</div>
<div class="pre_oneInfoWrap">
<div class="pre_oneInfo">
<div class="pre_oneCheck">
<img src="img/borrowNoCheck.png" alt="">
</div>
<div class="pre_oneWarp">
<div class="pre_oneWarpTop">
<div class="pre_oneMidText">借款<span>3000</span>元</div>
<div class="pre_oneMidTip pre_oneMidTipOrange">待放款</div>
<div class="pre_oneMidPic"><img src="img/returnRight.png" alt=""></div>
</div>
<div class="pre_oneWarpBottom">
<div>10-4 17:33:27</div>
<!-- <div class="preBorrowTotal">借款 <span>3000.00</span>元</div> <p class="preBorrowWeek">剩余 <span>1</span> 期</p> -->
</div>
</div>
</div>
<div class="pre_oneInfo">
<div class="pre_oneCheck">
<img src="img/borrowNoCheck.png" alt="">
</div>
<div class="pre_oneWarp">
<div class="pre_oneWarpTop">
<div class="pre_oneMidText">待还<span>3000</span>元</div>
<div class="pre_oneMidTip pre_oneMidTipGray">借款失败</div>
<div class="pre_oneMidPic"><img src="img/returnRight.png" alt=""></div>
</div>
<div class="pre_oneWarpBottom">
<div>10-4 17:33:27</div>
<!-- <div class="preBorrowTotal">借款 <span>3000.00</span>元</div> <p class="preBorrowWeek">剩余 <span>1</span> 期</p> -->
</div>
</div>
</div>
<div class="pre_oneInfo">
<div class="pre_oneCheck">
<img src="img/borrowNoCheck.png" alt="">
</div>
<div class="pre_oneWarp">
<div class="pre_oneWarpTop">
<div class="pre_oneMidText">待还<span>3000</span>元</div>
<div class="pre_oneMidTip pre_oneMidTipOrange">借款待审核</div>
<div class="pre_oneMidPic"><img src="img/returnRight.png" alt=""></div>
</div>
<div class="pre_oneWarpBottom">
<div>10-4 17:33:27</div>
<!-- <div class="preBorrowTotal">借款 <span>3000.00</span>元</div> <p class="preBorrowWeek">剩余 <span>1</span> 期</p> -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="D_payfor">
<div class="D_checkSure"><img src="img/borrowCheck.png" alt="">全选</div>
<ul class="D_checkSureNum">
<li class="D_selNum">
<div>已选<span class="or_num">1</span>笔, </div>
<div>逾期罚金:<span >100</span>元</div>
</li>
<li class="D_selTotal">合计:<span>3100</span>元</li>
</ul>
<a class="goPay" href="javascript:void(0);">立即还款</a>
</div>
第一种方法JS:
$(".pre_oneCheck>img").click(function(){
if($(this).attr("src")=="img/borrowChecking.png"){
$(this).attr("src","img/borrowCheck.png")
var isCheckAll=1;
$(".pre_oneCheck>img").each(function(){
if($(this).attr("src")=="img/borrowChecking.png"){
isCheckAll = 0;
}
});
if (isCheckAll == 1) {
$(".D_checkSure>img").attr("src","img/borrowCheck.png")
}
}else if($(this).attr("src")=="img/borrowCheck.png"){
$(this).attr("src","img/borrowChecking.png");
$(".D_checkSure>img").attr("src","img/borrowChecking.png")
}else{
$(this).attr("src","img/borrowNoCheck.png")
}
});
$(".D_checkSure>img").click(function(){
if($(this).attr("src")=="img/borrowCheck.png"){
$(this).attr("src","img/borrowChecking.png");
$(".pre_oneCheck>img").each(function(){
if($(this).attr("src")=="img/borrowNoCheck.png"){
return
}
if($(this).attr("src")=="img/borrowCheck.png"){
$(this).attr("src","img/borrowChecking.png");
}
});
}else{
$(this).attr("src","img/borrowCheck.png");
$(".pre_oneCheck>img").each(function(){
if($(this).attr("src")=="img/borrowNoCheck.png"){
return
}
$(this).attr("src","img/borrowCheck.png");
});
}
})
第二种方法:
HTML:
<s:if test='jsonObj.repayNum == jsonObj.finishRepayNum'>
<div class="installTop2 bg">
<div><img src="${base}/resources/img/jiekuanhuanqing.png" alt=""></div>
<p>本期<span>${jsonObj.repayNum }</span>笔分期借款已还清</p>
</div>
</s:if>
<s:else>
<div class="installTop bg">
<div class="installTopText"><span>${jsonObj.repaymentDate }</span>待还 | <span>${jsonObj.toRepayNum }</span>笔分期借款</div>
<div class="installTopTextMid">¥<span>${jsonObj.surplusTotalAmount }</span></div>
<div class="installTopTextFoot">还款日系统将自动从尾号<span>${jsonObj.bankCardNoEndNumber }</span>银行卡扣款</div>
</div>
</s:else>
<div class="installInfoWrap">
<s:iterator value="jsonObj.repaymentList" var="repayment">
<div class="installInfo">
<div class="installInfoTop bg">
<div class="installInfoTopLeft">
<div class="installInfoTopLeftPic">
<s:if test='#repayment.status != "2"'>
<img class="repayOrderCheck active" src="${base}/resources/img/borrowCheck.png" alt="">
</s:if>
<s:else>
<img src="${base}/resources/img/borrowNoCheck.png" alt="">
</s:else>
</div>
<div class="installInfoTopLeftInfo">
<div>借款<span>${repayment.borrowAmount }</span>元<span style="color:#32a7f6;margin-left:8px;" onclick="loanDetail(${repayment.borrowId })">详情</span></div>
<span>${repayment.borrowDate }</span>
</div>
</div>
<div class="installInfoTopRight">第 <span>${repayment.curNum }</span> 期</div>
</div>
<ul class="installInfoMid bg">
<li>
<span>借款状态:</span>
<s:if test='#repayment.status == "1" || #repayment.status == "3"'>
<div class="ins_status">${repayment.statusName }</div>
</s:if>
<s:elseif test='#repayment.status == "2"'>
<div class="ins_status_blue">${repayment.statusName }</div>
</s:elseif>
<s:else>
<div class="ins_status_blue">${repayment.statusName }</div>
</s:else>
</li>
<li>
<span>还款期数:</span>
<div>分 <span>${repayment.repaymentNum }</span> 期</div>
</li>
<li>
<span>还款方式:</span>
<div>每期等额</div>
</li>
<li>
<span>还款日:</span>
<div>${repayment.expiryDateFormat }</div>
</li>
<li>
<span>已逾期(天):</span>
<div><span>${repayment.overdueDays } </span>天</div>
</li>
<li>
<span>逾期罚金:</span>
<div>
<span class="interest">${repayment.interest }</span>元
<span class="singleTotalAmount" style="display:none;">${repayment.totalAmount }</span>
</div>
</li>
</ul>
</div>
</s:iterator>
</div>
<div class="D_payfor">
<div class="D_checkSure"><img class="repayOrderAllCheck active" src="${base}/resources/img/borrowCheck.png" alt="">全选</div>
<ul class="D_checkSureNum">
<li class="D_selNum">
<div>已选<span class="or_num">${jsonObj.toRepayNum }</span>笔, </div>
<div>逾期罚金:<span class="overdueFine">${jsonObj.overdueFine }</span>元</div>
</li>
<li class="D_selTotal">合计:<span class="totalAmount">${jsonObj.surplusTotalAmount }</span>元</li>
</ul>
<a class="goPay" href="javascript:void(0);">手动还款</a>
</div>
JS
$(".repayOrderAllCheck").click(function(){
if($(this).hasClass("active")){
$(this).removeClass("active").attr("src","${base}/resources/img/borrowChecking.png");
$(".repayOrderCheck").each(function(element) {
$(this).removeClass("active").attr("src","${base}/resources/img/borrowChecking.png");
});
$(".or_num").html(0);
$(".totalAmount").html(0);
$(".payTotalMoney").html(0);
$(".overdueFine").html(0);
}else{
var num = 0;
var overdueFine = 0.00;
var totalMoney = 0.00;
$(this).addClass("active").attr("src","${base}/resources/img/borrowCheck.png");
$(".repayOrderCheck").each(function(element) {
num = num+1;
$(this).addClass("active").attr("src","${base}/resources/img/borrowCheck.png");
var interest = $(this).parents(".installInfo").find(".interest").html();
var singleTotalAmount = $(this).parents(".installInfo").find(".singleTotalAmount").html();
overdueFine = (parseFloat(overdueFine) + parseFloat(interest)).toFixed(2);
totalMoney = (parseFloat(totalMoney) + parseFloat(singleTotalAmount)).toFixed(2);
});
$(".or_num").html(num);
$(".overdueFine").html(overdueFine);
$(".totalAmount").html(totalMoney);
$(".payTotalMoney").html(totalMoney);
}
});