根据用户需求勾选复选框返回数据

最新推荐文章于 2022-09-05 16:53:04 发布

csdn-Allen

最新推荐文章于 2022-09-05 16:53:04 发布

阅读量1.3k

点赞数 1

文章标签：根据用户需求勾选复选框返回数据根据需要勾选复选框选择复选框

本文链接：https://blog.csdn.net/baidu_41601299/article/details/87939573

版权

关注小编微信公众号公众号【前端基础教程从0开始】回复“1”，拉你进程序员技术讨论群，群内有大神，可以免费提供问题解答。公众号回复“小程序”，领取300个优秀的小程序开源代码+一套入门教程。公众号回复“领取资源”，领取300G前端，Java，产品经理，微信小程序，Python等资源合集大放送，让我们一起学前端。

需求：用户从【学习计划订单支付H5页面】点击【现金券抵扣】跳转到【学习计划推荐邀请H5页面】，然后根据用户需求勾选现金券的数量，再次返回到【学习计划订单支付H5页面】的时候，页面上会出现抵扣的金额。

具体抵扣的算法是：

1、用户拥有的现金券累计金额大于商品金额、且现金券总额减去商品金额小于20（1张现金券面额），则默认选中所有现金券、抵扣所有现金券累加总额，即现金券累计金额全部抵扣商品金额，抵扣后实际支付金额为零，例如商品金额为89，共有五张现金券，则默认选中全部5张现金券，共抵扣100元，抵扣后实付为0,5张现金券全部作废；用户可以选择使用几张现金券，例如用户可以选择使用4张，则抵扣80元。

2、用户拥有的现金券总额大于商品金额、且现金券总额减去商品金额大于20元，则默认选中现金券数量为：商品金额/现金券面额（能整除的情况）或商品金额/现金券面额+1（不能整除的情况）。例如用户共有6张现金券，累计金额为120，商品金额为89，则默认选中的现金券数量为：89/120+1，则默认选中5张。

文章所需资源链接：

百度网盘链接：https://pan.baidu.com/s/1S99vuUpBBKb0nQ43HJci-Q

提取码：bra3

百度网盘地址二维码：

在这里插入图片描述

学习计划推荐邀请页面

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!--1、引入css样式文件-->
    <link rel="stylesheet" href="recommended_invitation.css">
</head>
<body>
    <!--学习计划推荐邀请页面-->
    <div class="container">
        <div class="no_cash_coupon">
            <div class="no_cash_text">不使用现金券</div>
            <input type="checkbox" class="not_make" class="make">
        </div>
        <div class="cash_coupon_list">
            <div class="cash_coupon">
                    <img src="img/recommended_invitation/money.png" alt="" class="money">
                    <div class="num">200</div>
                    <div class="cardOne">学习计划受邀专享现金券</div>
                    <div class="cardTwo">限购买学习计划使用</div>
                    <div class="cardThree">有效期至2020.12.24</div>
                    <input type="checkbox" name="fkcheck" class="make" id="1"
                    value="20">
            </div>
            <div class="cash_coupon">
                    <img src="img/recommended_invitation/money.png" alt="" class="money">
                    <div class="num">200</div>
                    <div class="cardOne">学习计划受邀专享现金券</div>
                    <div class="cardTwo">限购买学习计划使用</div>
                    <div class="cardThree">有效期至2020.12.24</div>
                    <input type="checkbox" name="fkcheck" class="make" id="2"
                    value="40">
            </div>
            <div class="cash_coupon">
                    <img src="img/recommended_invitation/money.png" alt="" class="money">
                    <div class="num">200</div>
                    <div class="cardOne">学习计划受邀专享现金券</div>
                    <div class="cardTwo">限购买学习计划使用</div>
                    <div class="cardThree">有效期至2020.12.24</div>
                    <!-- <img src="../img/recommended_invitation/btn_unselected@2x.png" alt="" class="make"> -->
                    <input type="checkbox" name="fkcheck" class="make" id="3" value="30"> 
            </div>
            <div class="cash_coupon">
                    <img src="img/recommended_invitation/money.png" alt="" class="money">
                    <div class="num">200</div>
                    <div class="cardOne">学习计划受邀专享现金券</div>
                    <div class="cardTwo">限购买学习计划使用</div>
                    <div class="cardThree">有效期至2020.12.24</div>
                    <!-- <img src="../img/recommended_invitation/btn_unselected@2x.png" alt="" class="make"> -->
                    <input type="checkbox" name="fkcheck" class="make" id="4" value="20"> 
            </div>
            <div class="cash_coupon">
                    <img src="img/recommended_invitation/money.png" alt="" class="money">
                    <div class="num">200</div>
                    <div class="cardOne">学习计划受邀专享现金券</div>
                    <div class="cardTwo">限购买学习计划使用</div>
                    <div class="cardThree">有效期至2020.12.24</div>
                    <!-- <img src="../img/recommended_invitation/btn_unselected@2x.png" alt="" class="make"> -->
                    <input type="checkbox" name="fkcheck" class="make" id="5" value="20"> 
            </div>
        </div>
    </div>
    <!--2、引入jquery文件-->
    <script src="jquery-1.12.3.min.js"></script>
    <!--3、引入js功能文件-->
    <script src="recommended_invitation.js"></script>
</body>
</html>

css

/*整体做rem适配，100px相当于1rem*/
html{font-size:13.33333333vw}
/*全局css样式配置*/
*{
    padding: 0;
    margin: 0;
}

/*学习计划推荐邀请页面样式开始*/
.container{
    width: 100%;
    background-color: #EDEDED;
    position: fixed;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
.no_cash_coupon{
    width: 7.1rem;
    height: 1rem;
    background-color: #fff;
    margin-top: 0.2rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    position: relative;
}
.no_cash_text{
    width: 2rem;
    height: 0.42rem;
    font-family:PingFangSC-Regular;
    font-size: 0.30rem;
    color: #363636; 
    line-height: 0.42rem;
    letter-spacing: 0.0002rem;
    font-weight: 500;
    margin-left: 0.4rem;
}
input[type="checkbox"] {
    -webkit-appearance: none;  /*清除复选框默认样式*/
    /* background: #fff url("i/blue.png");   复选框的背景图，就是上图 */
    background-image: url(img/recommended_invitation/btn_unselected@2x.png);
    background-size: 0.32rem 0.32rem;
    height: 0.32rem;   /*高度*/
    width: 0.32rem;
    outline: none;
  }
  input[type="checkbox"]:checked {
    background-image: url(img/recommended_invitation/btn_selected@2x.png);
    background-size: 0.32rem 0.32rem;
    -webkit-appearance: none;  /*清除复选框默认样式*/
    outline: none;
  }
.not_make{
    width: 0.32rem;
    height: 0.32rem;
    position: absolute;
    right: 0.4rem;
    bottom:0.34rem;
}
.cash_coupon_list{
    width: 100%;
    margin-top: 0.4rem;
}
.cash_coupon{
    width: 7.1rem;
    height: 1.8rem;
    background-color: #fff;
    margin: 0 auto;
    margin-bottom: 0.4rem;
    position: relative;
}
.money{
    width: 0.16rem;
    height: 0.2rem;
    margin-left: 0.4rem;
    margin-top: 0.91rem;
    float: left;
    display: inline-block;
}
.num{
    width: 1.3rem;
    height: 0.9rem;
    margin-left: 0.08rem;
    margin-top: 0.45rem;
    font-family:PingFangSC-Semibold;
    font-size: 0.64rem;
    color: #FF0037; 
    line-height: 0.90rem;
    letter-spacing: 0.01rem;
    font-weight: 600;
    float: left;
}
.cardOne{
    width: 3.7rem;
    height: 0.42rem;
    margin-left: 0.3rem;
    margin-top: 0.35rem;
    font-family:PingFangSC-Semibold;
    font-size: 0.30rem;
    color: #333; 
    line-height: 0.42rem;
    font-weight: 600;
    float: left;
}
.cardTwo{
    width: 3.7rem;
    height: 0.28rem;
    margin-left: 0.3rem;
    margin-top: 0.06rem;
    font-family:PingFang-SC-Regular;
    font-size: 0.20rem;
    color: #3F3F3F; 
    line-height: 0.28rem;
    font-weight: 200;
    float: left;
}
.cardThree{
    width: 3.7rem;
    height: 0.28rem;
    margin-left: 0.3rem;
    margin-top: 0.06rem;
    font-family:PingFang-SC-Regular;
    font-size: 0.20rem;
    color: #3F3F3F; 
    line-height: 0.28rem;
    font-weight: 200;
    float: left;
}
.make{
    width: 0.32rem;
    height: 0.32rem;
    position: absolute;
    right: 0.4rem;
    bottom:0.74rem;
}

js

// jQuery点击选中现金券
$('.cash_coupon').on({
    click:function(e){
        e = e || window.event;
        if($(e.target).is(':checked')){
            //点击的哪个现金券已经被选中了
            console.log("你选中了我",e.target.id)
            //获取多calculate选框对象数组
            var productList=document.getElementsByName("fkcheck");
            var sum=0;
            var arr=[];
            for(var i=0;i<productList.length;i++){
                //计算勾选的产品
                if(productList[i].checked==true){
                    //value属性值为String 所以要进行转换
                    sum += parseInt(productList[i].value);  
                    arr.push(productList[i].id); 
                }
            }
            console.log(sum,arr);
            var parse=JSON.parse(sum);
            var str=arr+"|"+parse;
            localStorage.setItem("coupon",str)

            //当用户自己选择使用现金券抵扣时抵扣算法开始
            var shang=89;//商品价格
            var cumulativeNum=120;//用户累计金额
            if(cumulativeNum-shang<20){
                var defray=0;
                if(shang>parse){
                    defray=shang-parse;
                    console.log("支付金额为:"+defray+"元");
                    localStorage.setItem("defray",defray)  

                }else{
                    defray=0;//支付金额为0元
                    console.log("支付金额为:"+defray+"元"); 
                    localStorage.setItem("defray",defray)   
                }
            }else{
              if(shang>parse){
                    defray=shang-parse;
                    console.log("支付金额为:"+defray+"元");
                    localStorage.setItem("defray",defray)  
                }else{
                    defray=0;//支付金额为0元
                    console.log("支付金额为:"+defray+"元");
                    localStorage.setItem("defray",defray)    
                }
            }
            //当用户自己选择使用现金券抵扣时抵扣算法结束
        }else{
            console.log("你取消了",e.target.id)
            localStorage.clear()//清除所有的缓存

            var productList=document.getElementsByName("fkcheck");
            var sum=0;
            var arr=[];
            for(var i=0;i<productList.length;i++){
                //计算勾选的产品
                if(productList[i].checked==true){
                //value属性值为String 所以要进行转换
                    sum += parseInt(productList[i].value);  
                    arr.push(productList[i].id); 
                }
            }
            console.log(sum,arr);
            var parse=JSON.parse(sum);
            var str=arr+"|"+parse;
            localStorage.setItem("coupon",str)

            //当用户自己选择使用现金券抵扣时抵扣算法开始
            var shang=89;//商品价格
            var cumulativeNum=120;//用户累计金额
            if(cumulativeNum-shang<20){
                var defray=0;
                if(shang>parse){
                    defray=shang-parse;
                    console.log("支付金额为:"+defray+"元");
                    localStorage.setItem("defray",defray)  
                }else{
                    defray=0;//支付金额为0元
                    console.log("支付金额为:"+defray+"元"); 
                    localStorage.setItem("defray",defray)   
                }
            }else{
              if(shang>parse){
                    defray=shang-parse;
                    console.log("支付金额为:"+defray+"元");
                    localStorage.setItem("defray",defray)  
                }else{
                    defray=0;//支付金额为0元
                    console.log("支付金额为:"+defray+"元"); 
                    localStorage.setItem("defray",defray)   
                }
            }
            //当用户自己选择使用现金券抵扣时抵扣算法结束
        }
    }
})
// jQuery点击选中不使用现金券
$(".not_make").on('click',function(){
    if($(this).is(':checked')){
        $(this).parents().siblings('.cash_coupon_list').find('input').attr('checked',null);
        $(this).parents().siblings('.cash_coupon_list').find('input').attr("disabled","disabled");
        localStorage.clear()//清除所有缓存
        localStorage.setItem("not_use","不使用现金券");
    }else{
        $(this).parents().siblings('.cash_coupon_list').find('input').attr('checked',true);
        $(this).parents().siblings('.cash_coupon_list').find('input').removeAttr("disabled");
        localStorage.removeItem("not_use")
    }
})

//用户选择使用现金券抵扣算法

var arr1=[];//获取用户所选的现金券总值数组
var arr2=[];//获取用户所选的现金券id数组
var aa=localStorage.getItem("coupon");//获取localStorage中存储的内容
if(aa!=null){
    console.log(aa)
    var zong=aa.indexOf("|");
    var zongTwo=aa.slice(zong+1,zong.length)
    var zongThree=aa.slice(0,zong)
    arr1.push(zongTwo);
    arr2.push(zongThree);
    var max=Math.max.apply(null,arr1);//获取到用户所选的现金券总值
    var idNum=arr2.slice(arr2.length - 1)//获取到用户所选的现金券id
    var numOne=idNum[0];//取出字符串
    var numTwo= numOne.replace(/[^0-9]/ig,"");//去除字符串中的逗号
    var arrNum=numTwo.split('');//将字符串转化为数组
    console.log(arrNum,max)//输出用户所选的id和总抵扣价值
}else{
    console.log("请选择不使用现金券！");
}  
//具体抵扣算法
var shang=89;//商品价格
var cumulativeNum=120;//用户累计金额
if(cumulativeNum-shang<20){
    //默认选中所有现金券
    var sum=0;
    var arr=[];
    var productList=document.getElementsByName("fkcheck");
    for(var i=0;i<productList.length;i++){
        productList[i].checked=true
        sum += parseInt(productList[i].value);  
        arr.push(productList[i].id); 
    }
    var parse=JSON.parse(sum);
    var str=arr+"|"+parse;
    localStorage.setItem("coupon",str)

    var defray=0;
    if(shang>max){
        defray=shang-max;
        alert("支付金额为:"+defray+"元");
        localStorage.setItem("defray",defray)
    }else{
        defray=0;//支付金额为0元
        console.log("支付金额为:"+defray+"元");
        localStorage.setItem("defray",defray)  
    }
}else{
    var xianNum=0;//现金券要显示的数量
    var cash=20;//现金券的面额;
    if (shang%cash==0){
        xianNum=parseInt(shang/cash);
        console.log(xianNum);
        //默认选中的现金券数量
        var sum=0;
        var arr=[];
        var productList=document.getElementsByName("fkcheck");
        for(var i=0;i<xianNum;i++){
            productList[i].checked=true
            sum += parseInt(productList[i].value);  
            arr.push(productList[i].id);  
        }
        var parse=JSON.parse(sum);
        var str=arr+"|"+parse;
        localStorage.setItem("coupon",str)
        if(shang>max){
            defray=shang-max;
            console.log("支付金额为:"+defray+"元");
            localStorage.setItem("defray",defray)
        }else{
            defray=0;//支付金额为0元
            console.log("支付金额为:"+defray+"元"); 
            localStorage.setItem("defray",defray) 
        }
    }else{ 
        xianNum=parseInt(shang/cash)+1;
        console.log(xianNum);
        //默认选中的现金券数量
        var sum=0;
        var arr=[];
        var productList=document.getElementsByName("fkcheck");
        for(var i=0;i<xianNum;i++){
            productList[i].checked=true
            sum += parseInt(productList[i].value);  
            arr.push(productList[i].id);  
        }
        var parse=JSON.parse(sum);
        var str=arr+"|"+parse;
        localStorage.setItem("coupon",str)

        if(shang>max){
            defray=shang-max;
            console.log("支付金额为:"+defray+"元");
            localStorage.setItem("defray",defray) 
        }else{
            defray=0;//支付金额为0元
            console.log("支付金额为:"+defray+"元");  
            localStorage.setItem("defray",defray) 
        }
    }
}

学习计划订单支付页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="box">
        <span id="not_use"></span>
        <!--抵扣金额显示位置-->
        <span id="spanOne"></span>
    </div>
    <script src="jquery-1.12.3.min.js"></script>
   <script>
        //用户选择不使用现金券 
        var not_use=localStorage.getItem("not_use");
        if(not_use!=null){
            console.log(not_use)
            $("#not_use").html(not_use)
        }else{//用户选择使用现金券
            var arr1=[];//获取用户所选的现金券总值数组
            var arr2=[];//获取用户所选的现金券id数组
            var aa=localStorage.getItem("coupon");//获取localStorage中存储的内容
            var defray=localStorage.getItem("defray");
            if(aa!=null){
                console.log(aa)
                var zong=aa.indexOf("|");
                var zongTwo=aa.slice(zong+1,zong.length)
                var zongThree=aa.slice(0,zong)
                arr1.push(zongTwo);
                arr2.push(zongThree);
                var max=Math.max.apply(null,arr1);//获取到用户所选的现金券总值
                var idNum=arr2.slice(arr2.length - 1)//获取到用户所选的现金券id
                var numOne=idNum[0];//取出字符串
                var numTwo= numOne.replace(/[^0-9]/ig,"");//去除字符串中的逗号
                var arrNum=numTwo.split('');//将字符串转化为数组
                console.log(arrNum,max)//输出用户所选的id和总抵扣价值
                console.log("你需要支付的金额为"+defray)
            }else{
                console.log("请到学习计划推荐邀请页面选择不使用现金券！");
                //window.location.href="recommended_invitation.html"//跳转到学习计划推荐邀请页面
            }  
        }
    </script>
</body>
</html>

总结

以上所述是我给大家介绍的根据用户需求勾选复选框返回数据的代码实现，希望对大家有所帮助，如果大家有任何疑问请给我留言，我会及时回复大家的。转载请附上源码地址!

作者微信：欢迎大家交流

在这里插入图片描述

csdn-Allen

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
根据用户需求勾选复选框返回数据

需求：用户从【学习计划订单支付H5页面】点击【现金券抵扣】跳转到【学习计划推荐邀请H5页面】，然后根据用户需求勾选现金券的数量，再次返回到【学习计划订单支付H5页面】的时候，页面上会出现抵扣的金额。具体抵扣的算法是：1、用户拥有的现金券累计金额大于商品金额、且现金券总额减去商品金额小于20（1张现金券面额），则默认选中所有现金券、抵扣所有现金券累加总额，即现金券累计金额全部抵扣商品金额，抵扣后...
复制链接

扫一扫