原生JavaScript实现购物车全选单选数量计算删除功能

购物车功能概述与布局

本文分享了一套使用JavaScript实现购物车逻辑与功能的完整代码示例，供开发者参考与学习。

首先，在布局方面，建议主体内容采用表格模式进行排列，以便清晰展示商品列表。

其次，系统需要判断当前用户是否已登录，这是执行后续操作的前提条件。

具体的头部布局代码可根据实际项目需求进行调整，以下是判断登录状态的实现逻辑。

用户登录状态判断


// 判断用户是否登录
var username = getCookie("username");
//如果登录成功就执行这段代码
if(username){
    var vip = $(`<a href='javascript:;'>欢迎<b>${username}</b>来到天猫超市</a>`)
    var loginout = $(`<a href='javascript:;' class="loginout">退出</a>`)
    $(".hLeft").empty()
    $(".hLeft").append(vip)
    $(".hLeft").append(loginout)
    $(".hLeft>a").css({
        "color":"#666",
        "lineHeight":"32px",
        "marginLeft":"10px"
    })
    $(".hLeft>a>b").css({
        "color":"red",
        "fontWeight":"800",
    })
    $(".loginout").click(function(){
        removeCookie("username")
        $(".hLeft").empty()
        $(".hLeft").html(` <a href="home.html" >天猫首页</a>
        <a href="javascript:;" >喵，欢迎来到天猫</a>
        <a href="login.html" >请登录</a>
        <a href="register-test.html" >免费注册</a>`)
    })
}else{
    alert("请先登录");
    location.assign("./login.html");
}

接下来，需要检测从商品详情页是否有数据传递至购物车页面。

在此示例中，数据被保存至本地存储（localStorage），开发者也可根据实际需求选择其他存储方式。相关代码如下：

数据接收与本地存储处理


// 接收详情页传过来的数据
// 先判断本地存储中有没有商品
var data = localStorage.getItem("cart");
if(!data){
    $(".page-con").empty();
    var str = "";
    str +=`<h2>购物车空空如也！！！</h2>
    <p>请快点移步到列表页选择商品把<p><a href="./list.html" >进入列表页</a>
    `
    $(".page-con").html(str);
    $(".page-con").css({width:"900px",margin:"40px auto 0"});
    $(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
    $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
    $(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
}else{
    // 再判断是否有当前用户的购物车是数据
    // 将数据转成数组类型
    data = JSON.parse(data);
    // 查看数据是否存在
    for(var j=0;j<data.length;j++){}
    var res = data.some(v=>{
        return v.username == username;
    })
    if(!res){
        $(".page-con").empty();
        var str = "";
        str +=`<h2>购物车空空如也！！！</h2>
        <p>请快点移步到列表页选择商品把<p><a href="./list.html" >进入列表页</a>
        `
        $(".page-con").html(str);
        $(".page-con").css({width:"900px",margin:"40px auto 0"});
        $(".page-con h2").css({fontSize:"50px",color:"blue",lineHeight:"80px"})
        $(".page-con p").css({fontSize:"20px",lineHeight:"26px"});
        $(".page-con a").css({width:"100px",height:"40px",background:"skyblue",marginTop:"20px",display:"block"})
    }else{
        // 有数据 且有自己的数据
        // 先把自己的数据找出来
        var arr = data.filter(v=>v.username == username);
        // 遍历获取的数据 
        // 在数组中没有想要的商品数据，需要从数据库中获取一下 通过id在数据库中查找数据
        var ids = arr.map(v=>v.goodsid);
        
        ids = ids.join(",")

4，查询有详情页传送过来的数据时，我们可以通过传过来的id到数据库中查找我们想要的数据

通过发送AJAX请求至后端服务器，获取具体的商品信息数据。

商品信息获取与动态渲染


$.ajax({
            url:"./server/cart.php",
            dataType:"json",
            data:{ids:ids},
            type:"get",
            success:res=>{
                var str = '';
                for(var i=0;i<res.length;i++){
                    // 根据res[i] 每一条商品，从arr中找出number数量
                    var number = arr.find(v=>v.goodsid==res[i].id).number;
                    
                    str +=`
                        <div class="pageMtop">
                            <input type="checkbox" name="onetop"><i></i><span>店铺：${res[i].name}</span><em></em>
                        </div>
                        <div class="pageMcontent">
                            <h3><img src="images/cat10.png">8.6 0点开享,每满300减30</h3>
                            <ul>
                                <li>
                                    <input type="checkbox" name="one">
                                </li>
                                <li>
                                    <a href="#" >
                                        <img src="${res[i].imgpath}">
                                    </a>
                                </li>
                                <li>
                                    <p>
                                        <a href="#" >${res[i].introduce}</a>
                                    </p>
                                    <img src="images/cat03.png" alt="">
                                    <a href="javascript:;" ><img src="images/cat04.png" alt=""></a>
                                </li>
                                <li>
                                    <p>尺码：M</p>
                                    <p>主要颜色：6685白色+6691雾霾蓝（M码预售8月8号发出</p>
                                    <a href="#" >修改</a>
                                </li>
                                <li>
                                    <span>${res[i].price}</span>
                                </li>
                                <li class="data-name" data-id = "${res[i].id}">
                                <input type="button" class="reduce" value="-">
                                <input class="numberone"  type="number" name="number" data-stock="${res[i].stock}" value="${number}">
                                <input type="button" class="add" value="+">
                                </li>
                                <li class="subtotal">
                                    ${res[i].price*number}
                                </li>
                                <li>
                                    <p>移入文件夹</p>
                                    <p class="btn">删除</p>
                                    <p>宝贝</p>
                                </li>
                            </ul>
                        </div>
                    `
                }
                $(".page-middle").html(str)
                 //在这里添加全选功能
                // 在这里写的话 代码嵌套太深 - 将功能写在外面，然后在这边调用函数
                //调用全选的功能
                selectAll()
                //调用单选功能
                selectone()
                // 计算总价和总数量
                priceAndNumberAll()
                // 数量加减
                addAndReduce()
                // 点击删除键
                removebtn()
            }
        })
    }

商品列表的布局与内容渲染需要动态加载，生成后的HTML元素将被插入到主体内容的大容器中以展示给用户。

随后，开始实现购物车页面的各项交互功能。

由于功能代码较多，为避免冗余，将每个功能封装为独立的函数。在AJAX请求成功的回调函数中，直接调用这些封装好的函数即可。

第一项功能是实现全选操作。

全选功能的实现代码如下：

全选与单选功能实现


// 全选功能
function selectAll(){
    // 给上下两个全选都绑定事件
    $("[name='topAll']")[0].onclick = $("[name='footAll']")[0].onclick = function(){
        // 设置单选的状态
        $("[name='one']").prop("checked",$(this).prop("checked"))
        $("[name='onetop']").prop("checked",$(this).prop("checked"))
        // 给两个复选框添加全选
        $("[name='topAll']").prop("checked",$(this).prop("checked"))
        $("[name='footAll']").prop("checked",$(this).prop("checked"))
        priceAndNumberAll()
    }
}

第二项功能是处理单选操作。

单选功能的实现代码如下：


// 单选功能
function selectone(){
    $("[name='one']").click(function(){
        // 判断是否所有的都选中
        //$("[name='one']")是一个伪数组，不能调用数组方法 先把它转成数组
        $("[name='onetop']").prop("checked",$(this).prop("checked"))
        var arr = Array.prototype.slice.call($("[name='one']"))
        // 调用every方法 如果有一个没选中就返回false
        var res = arr.every(v=>$(v).prop("checked"));
        if(res){
            $("[name='topAll']").prop("checked","checked");
            $("[name='onetop']").prop("checked","checked");
            $("[name='footAll']").prop("checked","checked");
        }else{
            $("[name='topAll']").prop("checked",false);
            $("[name='footAll']").prop("checked",false)
        }
        priceAndNumberAll()
    })
}

第三项功能是计算选中商品的数量总计与价格总价。

计算总计与总价的代码如下：

数量计算与加减交互


// 计算总价和总数量
function priceAndNumberAll(){
    // 根据选中的框来计算
    // 选择被选中的那个数量number
    var allNumInput = $("[name='one']:checked").parent().siblings(".data-name").find("[name='number']")
    var allNum = 0;
    allNumInput.each(function(k,v){
        allNum += v.value-0;
    })
    $(".allnumber").text(allNum);
    var allPriceEle = $("[name=one]:checked").parent().siblings(".subtotal")
    var allPrice = 0;
    allPriceEle.each(function(k,v){
        allPrice += allPriceEle.text()-0;
    })
    $(".allprice").text(allPrice);
}

第四项功能是响应用户点击加减按钮的操作，从而动态调整商品数量并重新计算金额。

数量加减功能的实现代码如下：


// 点击加减让数量进行加减
function addAndReduce(){
    // 点击加的按钮 
    $(".add").click(function(){
        // 先获取input框里面的数值
        var num = $(this).prev().val()-0;
        // 每点击一次就让input里面的值++
        num ++
        // 数据是不能无线加的 要进行判断 如果加到最大值 就不让他加了
        if(num>=$(this).prev().attr("data-stock")-0){
            num=$(this).prev().attr("data-stock")-0
            $(this).prop("disabled",true);
            $(this).addClass("bgadd");
            $(this).prev().prev().prop("disabled",false);
        }else{
            $(this).prop("disabled",false);
            $(this).prev().prev().removeClass("bgreduce");
        }
        $(this).prev().val(num)
        // 计算小计里面的价格
        // 找到放单价的那个标签和值
        var price = $(this).parent().prev().find("span").text()-0;
        // 重新计算小计
        var subtotal = price*num;
        // 计算好小计之后放到存放那个td中
        $(this).parent().next().text(subtotal);
        // 重新设置本地存储
        // 获取本地存储的数据
        var data = localStorage.getItem("cart");
        // 转换成数组
        data = JSON.parse(data);
        // 遍历数组 查找数组中满足条件的数据
        var obj = data.find(v=>v.username==username && v.goodsid==$(this).parent().attr("data-id"));
        obj.number = num;
        localStorage.setItem("cart",JSON.stringify(data))
        priceAndNumberAll()
    })
    $(".reduce").click(function(){
        // 先获取input框里面的数值
        var num = $(this).next().val()-0;
        // 每点击一次就让input里面的值++
        num --
        // 数据是不能无线加的 要进行判断 如果加到最大值 就不让他加了
        if(num<1){
            num=1;
            $(this).prop("disabled",true);
            $(this).addClass("bgreduce");
            $(this).next().next().prop("disabled",false)
        }else{
            $(this).prop("disabled",false);
            $(this).next().next().removeClass("bgadd");
        }
        $(this).next().val(num)
        
        var price = $(this).parent().prev().find("span").text()-0;
        // 重新计算小计
        var subtotal = price*num;
        // 计算好小计之后放到存放那个td中
        $(this).parent().next().text(subtotal);
        // 将数据重新存储到本地存储
        var data =  localStorage.getItem("cart");
        data = JSON.parse(data);
        // 查找满足添加的数据
        var obj = data.find(v=>{
            return v.username==username&&v.goodsid==$(this).parent().attr("data-id");
        })
        obj.number = num;
        localStorage.setItem("cart",JSON.stringify(data));
        priceAndNumberAll()
    })
}

第五项功能是处理点击删除按钮时的商品移除操作。

删除功能的实现代码如下：

商品删除功能实现


// 点击删除的函数
function removebtn(){
    // 点击事件
    $(".btn").click(function(){
        // 提示是否要删除
        if(!confirm("你确定要删除吗")){
            return false;
        }
        // 将本地存储的这条数据删除
        var data = localStorage.getItem("cart");
        data = JSON.parse(data);
        var index = data.findIndex(function(v){
            v.username==username&&v.goodsid==$(this).parent().siblings(".data-name").attr("data-id")
        });
        data.splice(index,1);
        localStorage.setItem("cart",JSON.stringify(data))
        var tr = $(this).parent().parent();
        tr.remove()
        if(!data.filter(v=>v.username==username).length){
            // 如果数据没了就不显示表格
            $(".page-middle").empty();
            // 让页面显示自定义的内容
            var str = "";
            str += `<h2>购物车空空如也！！！</h2>
        <p>请快点移步到列表页选择商品把<p><a href="./list.html" >进入列表页</a>
        `
        $(".page-middle").html(str);
        $(".page-middle").css({width:"1200px",margin:"40px auto 0"});
        $(".page-middle h2").css({fontSize:"50px",lineHeight:"80px",color:"blue"})
        }

    })
}

以上内容即为购物车功能的全部实现细节，希望对读者有所帮助，欢迎继续支持本站获取更多技术分享。

原生JS实现购物车核心功能与逻辑详解