全选和反选,怎么写,两种方法~

来源:互联网 发布:网络女神瑞思 编辑:程序博客网 时间:2024/05/03 20:41

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);     }});
原创粉丝点击