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

时间:2022-05-02 10:27:20

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);

     }
});