仿淘宝购物车页面----jQuery

注：仿写淘宝购物车逻辑，拿来即用；
jQuery逻辑包括：购物车全选，商品全选、购物车结算、删除单个商品、删除选中商品、店铺全选等功能；主要逻辑在最下方，还请各位看官点个关注点歌赞不迷路撒~~~~

html部分：

<div class="shop_car_box">
        <div class="w">
            <div class="title">
                <span class="line"></span>
                我的购物车
            </div>
            <div class="cart-warp">
                <!-- 头部全选模块 -->
                <div class="cart-thead">
                    <div class="t-checkbox">
                        <input type="checkbox" style="margin-right: 5px;" name="" id="" class="checkall"> 全选
                    </div>
                    <div class="t-goods">商品信息</div>
                    <div class="t-price">单价</div>
                    <div class="t-num">数量</div>
                    <div class="t-sum">金额</div>
                    <div class="t-action">操作</div>
                </div>
                <!-- 商品详细模块 -->
                <div class="cart-item-list">
                    <div class="shop">
                        <div class="J_ItemHead">
                            <input class="J_CheckBoxShop" type="checkbox" name="orders[]">
                            玫瑰与鹿旗舰店
                        </div>
                        <div class="cart-item">
                            <div class="p-checkbox" style="width: 95px!important">
                                <input type="checkbox" name="" id="" class="j-checkbox">
                            </div>
                            <div class="p-goods">
                                <div class="p-img">
                                    <img src="../resources/style/system/front/default/images/rexiao.png" alt="">
                                </div>
                                <div class="p-msg">
                                    <div class="descript">
                                        【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲
                                    </div>
                                    <div class="p-type">
                                        <span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>数量：1</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-price">￥12.60</div>
                            <div class="p-num">
                                <div class="quantity-form">
                                    <a href="javascript:;" class="decrement">-</a>
                                    <input type="text" class="itxt" value="1">
                                    <a href="javascript:;" class="increment">+</a>
                                </div>
                            </div>
                            <div class="p-sum">￥12.60</div>
                            <div class="p-action"><a href="javascript:;">删除</a></div>
                        </div>
                    </div>


                    <div class="shop">
                        <div class="J_ItemHead">
                            <input class="J_CheckBoxShop" type="checkbox" name="orders[]">
                            玫瑰与鹿旗舰店
                        </div>
                        <div class="cart-item">
                            <div class="p-checkbox" style="width: 95px!important">
                                <input type="checkbox" name="" id="" class="j-checkbox">
                            </div>
                            <div class="p-goods">
                                <div class="p-img">
                                    <img src="../resources/style/system/front/default/images/rexiao.png" alt="">
                                </div>
                                <div class="p-msg">
                                    <div class="descript">
                                        【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽
                                    </div>
                                    <div class="p-type">
                                        <span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>数量：1</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-price">￥24.80</div>
                            <div class="p-num">
                                <div class="quantity-form">
                                    <a href="javascript:;" class="decrement">-</a>
                                    <input type="text" class="itxt" value="1">
                                    <a href="javascript:;" class="increment">+</a>
                                </div>
                            </div>
                            <div class="p-sum">￥24.80</div>
                            <div class="p-action"><a href="javascript:;">删除</a></div>
                        </div>
                    </div>

                    <div class="shop">
                        <div class="J_ItemHead">
                            <input class="J_CheckBoxShop" type="checkbox" name="orders[]">
                            玫瑰与鹿旗舰店
                        </div>
                        <div class="cart-item">
                            <div class="p-checkbox" style="width: 95px!important">
                                <input type="checkbox" name="" id="" class="j-checkbox">
                            </div>
                            <div class="p-goods">
                                <div class="p-img">
                                    <img src="../resources/style/system/front/default/images/rexiao.png" alt="">
                                </div>
                                <div class="p-msg">
                                    <div class="descript">
                                        唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍
                                    </div>
                                    <div class="p-type">
                                        <span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>数量：1</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-price">￥29.80</div>
                            <div class="p-num">
                                <div class="quantity-form">
                                    <a href="javascript:;" class="decrement">-</a>
                                    <input type="text" class="itxt" value="1">
                                    <a href="javascript:;" class="increment">+</a>
                                </div>
                            </div>
                            <div class="p-sum">￥29.80</div>
                            <div class="p-action"><a href="javascript:;">删除</a></div>
                        </div>
                        <div class="cart-item">
                            <div class="p-checkbox" style="width: 95px!important">
                                <input type="checkbox" name="" id="" class="j-checkbox">
                            </div>
                            <div class="p-goods">
                                <div class="p-img">
                                    <img src="../resources/style/system/front/default/images/rexiao.png" alt="">
                                </div>
                                <div class="p-msg">
                                    <div class="descript">
                                        唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍
                                    </div>
                                    <div class="p-type">
                                        <span>类别：360g</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                        <span>数量：1</span>
                                    </div>
                                </div>
                            </div>
                            <div class="p-price">￥29.80</div>
                            <div class="p-num">
                                <div class="quantity-form">
                                    <a href="javascript:;" class="decrement">-</a>
                                    <input type="text" class="itxt" value="1">
                                    <a href="javascript:;" class="increment">+</a>
                                </div>
                            </div>
                            <div class="p-sum">￥29.80</div>
                            <div class="p-action"><a href="javascript:;">删除</a></div>
                        </div>
                    </div>
                </div>
                <!-- 结算模块 -->
                <div class="cart-floatbar">
                    <div class="select-all">
                        <input type="checkbox" name="" id="" class="checkall">全选
                    </div>
                    <div class="operation">
                        <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
                        <a href="javascript:;" class="clear-all">清理购物车</a>
                    </div>
                    <div class="toolbar-right">
                        <div class="amount-sum">已经选<em>1</em>件商品</div>
                        <div class="price-sum">合计（不含运费）： <em>￥12.60</em></div>
                        <div class="btn-area">去结算</div>
                    </div>
                </div> 
                <!-- cart-floatbar end -->
            </div> <!-- cart-warp end -->

            <div class="hotSale">
                <div class="tit">
                    <div class="title">
                        <span class="line"></span>
                        商家热卖
                    </div>
                    <div style="font-size: 18px;color: #CCA156;">更多></div>
                </div>
                <div class="pro_list">
                    <div class="pro_list_item">
                        <div class="img">
                            <img src="../resources/style/system/front/default/images/1.png" alt="">
                        </div>
                        <div>这也不是不知道叫什么的水果</div>
                        <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                    </div>
                    <div class="pro_list_item">
                        <div class="img">
                            <img src="../resources/style/system/front/default/images/rexiao.png" alt="">
                        </div>
                        <div>这也不是不知道叫什么的水果</div>
                        <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                    </div>
                    <div class="pro_list_item">
                        <div class="img">
                            <img src="../resources/style/system/front/default/images/fruits.png" alt="">
                        </div>
                        <div>这也不是不知道叫什么的水果</div>
                        <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                    </div>
                    <div class="pro_list_item">
                        <div class="img">
                            <img src="../resources/style/system/front/default/images/bj.png" alt="">
                        </div> 
                        <div>这也不是不知道叫什么的水果</div>
                        <div style="font-size: 14px;color: #E1251B;">¥<span style="font-size: 17px;">31</span>.00</div>
                    </div>
                </div>
            </div>
        </div>
    </div>

css部分：

     * {
         margin: 0;
         padding: 0
     }
     em,
     i {
         font-style: normal;
     }
     li {
        list-style: none;
    }
    a {
        color: #666;
        text-decoration: none;
    }
    a:hover {
        color: #e33333;
    }
    body {
        font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
        color: #666
    }


    .J_ItemHead{
        height: 32px;
        line-height: 32px;
        text-indent: 46px;
        color: #555555;
        font-size: 14px;
        margin-top: 10px;
    }
    .shop_car_box{
        padding-bottom: 20px;
    }

    .shop{
        transition:.3s;
    }
    .w {
        width: 1192px;
        margin: 0 auto;
        padding: 32px 35px;
        background:#fff;
    }

    .w .title{
        
        font-size: 18px;
        color: #1E1E1E;
        margin-bottom: 18px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .hotSale .tit{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 21px;
    }

    .pro_list{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }

    .pro_list .pro_list_item{
        width: 22%;
        padding: 37px 26px 20px;
        font-size: 14px;
        color: #666666;
        border:1px solid rgba(231,231,231,1);
    }

    .pro_list .pro_list_item div:nth-child(2){
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .pro_list_item .img{
        width: 100%;
        /* height: 140px; */
        margin-bottom: 19px;
    }

    .pro_list_item .img img{
        width: 100%;
        height: 169px;
    }

    .w .title .line{
        width: 4px;
        height: 20px;
        background: #CCA156;
        display: inline-block;
        margin-right: 8px;
        margin-top: -1px;
    }
    .cart-thead {
        height: 40px;
        line-height: 40px;
        /* margin: 5px 0 10px; */
        /* padding: 5px 0; */
        background: #f3f3f3;
        border: 1px solid #F7F8FA;
        border-top: 0;
        position: relative;
        text-align: center;
    }
    .cart-thead>div,
    .cart-item>div {
        float: left;
    }
    .t-checkbox,
    .p-checkbox {
        height: 32px;
        line-height: 32px;
        padding-top: 7px;
        width: 122px!important;
        padding-left: 11px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .t-goods {
        width: 400px;
        text-align: left;
    }
    .t-price {
        width: 126px;
        padding-right: 40px;
        text-align: right;
    }
    .t-num {
        width: 156px;
        text-align: center;
    }
    .t-sum {
        width: 100px;
        text-align: right;
    }
    .t-action {
        width: 130px;
        text-align: right;
    }

    .cart-warp{
        background: #fff;
    }
    .cart-item {
        height: 160px;
        /* border-style: solid;
        border-width: 2px 1px 1px;
        border-color: #aaa #f1f1f1 #f1f1f1; */
        background: #fff;
        padding-top: 14px;
        margin: 15px 0;
        display: flex;
        align-items: center;
        background: #F7F8FA;
        margin-top: 0;
        padding-top: 0;
        transition:.3s;
    }

    /* 选中的商品的背景色 */
    .check-cart-item {
        /* background: #F7F8FA; */
        background: #FFF7E8;
    }
    .p-checkbox {
        width: 50px;
    }
    .p-goods {
        margin-top: 8px;
        width: 437px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }
    .p-img {
        float: left;
        border: 1px solid #ccc;
        padding: 10px;
        width: 81px;
        height: 81px;
    }

    .p-img img{
        width: 100%;
        height: 100%;
    }

    .p-msg {
        float: left;
        width: 210px;
        margin: 0 10px;
    }

    .p-msg .descript{
        margin-bottom: 15px;
        color: rgba(59,59,59,1);
        font-size: 14px;
        font-weight: 400;
    }

    .p-msg .p-type{
        color: #807E7E;
        font-size: 14px;
    }
    .p-price {
        width: 120px;
        text-align: center;
   }
   .quantity-form {
       width: 90px;
       height: 22px;
   }

   .quantity-form a{
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 4px;
   }
   .p-num {
       width: 170px;
       display: flex;
       justify-content: center;
   }
   .decrement,
   .increment {
       float: left;
       border: 1px solid #cacbcb;
       height: 22px;
       line-height: 22px;
       padding: 1px 0;
       width: 22px;
       text-align: center;
       color: #666;
       background: #fff;
       margin-left: -1px;
   }
   .itxt {
       float: left;
       border: 1px solid #cacbcb;
       width: 42px;
       height: 22px;
       line-height: 22px;
       text-align: center;
       padding: 1px;
       margin-left: -1px;
       font-size: 12px;
       font-family: verdana;
       color: #333;
       -webkit-appearance: none;
   }

   .p-action{
       width: 115px;
       text-align: center;
   }
   .p-sum {
       font-weight: 700;
       width: 145px;
       text-align: center;
   }
   .cart-floatbar {
       height: 50px;
       border: 1px solid #f0f0f0;
       background: #fff;
       position: relative;
       margin-bottom: 50px;
       line-height: 50px;
   }
   .select-all {
       float: left;
       height: 18px;
       line-height: 18px;
       padding: 16px 0 16px 9px;
       white-space: nowrap;
   }
   .select-all input {
       vertical-align: middle;
       display: inline-block;
       margin-right: 5px;
   }
   .operation {
       float: left;
       width: 200px;
       margin-left: 40px;
   }
   .clear-all {
       font-weight: 700;
       margin: 0 20px;
   }
   .toolbar-right {
       float: right;
   }
   .amount-sum {
       float: left;
   }
   .amount-sum em {
       font-weight: 700;
       color: #E2231A;
       padding: 0 3px;
   }
   .price-sum {
       float: left;
       margin: 0 15px;
   }
   .price-sum em {
       font-size: 16px;
       color: #E2231A;
       font-weight: 700;
   }
   .btn-area {
       font-weight: 700;
       width: 94px;
       height: 52px;
       line-height: 52px;
       color: #fff;
       text-align: center;
       font-size: 18px;
       font-family: "Microsoft YaHei";
       background: #e54346;
       overflow: hidden;
       cursor: pointer;
   }

其他静态资源：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.3/jquery.js"></script>
//bootstrap需要的话就引，不需要就忽略
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

重头戏jQuery部分：

<script>

    // 先计算金额
    getSum();


    // 1当全选按钮改变时，让小复选框按钮和全选按钮保持一致。
    // 全选按钮被选中时，让所有商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额
    // .checkall是全选复选框；.j-checkbox是商品的复选框；.J_CheckBoxShop是某个店铺的全选复选框
    $(".checkall").change(function () {
        // 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）
        $(".j-checkbox, .checkall,.J_CheckBoxShop").prop("checked", $(this).prop("checked"));
        getSum();   // 计算总额函数
        // 添加背景
        // 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
        if ($(this).prop("checked")) {
            $(".cart-item").addClass("check-cart-item");
        } else {
            $(".cart-item").removeClass("check-cart-item");
        }
    })


    // 2当小复选框按钮改变时，判断是否所有的小按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。
    // 通过已选复选框的个数是否等于所有小复选框的总个数来判断，同时也要改变背景色和总额模块
    $(".j-checkbox").change(function () {
        // if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
        //     $(".checkall").prop("checked", true);
        // } else {
        //     $(".checkall").prop("checked", false);
        // }
        getSum();//金额结算
        
        shopItemCheck($(this))//此方法可删除，将上面的注释解开始一样的效果
        shopAllcheck()
        // 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
        if ($(this).prop("checked")) {
            $(this).parents(".cart-item").addClass("check-cart-item");
        } else {
            $(this).parents(".cart-item").removeClass("check-cart-item");
        }
    })



    // 3、可以通过点击加减号或者直接修改文本框来修改商品数量，后边的小计也做相应的变化
    // (1)点击+按钮，文本框数字加一，小计加价。
    // 先把原来的数量获取过来，然后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计
    $(".increment").click(function () {
        var n = $(this).siblings(".itxt").val();
        n++;
        $(this).siblings(".itxt").val(n);
        // 小计模块
        // num为获取过来的单价，用substr()截取字符串把前边的￥去掉
        var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // toFixed(2)保留两位小数
        var price = (num * n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    })

    // (2)点击-按钮，文本框数字减一，小计减价。
    // 具体方法同上，有一点不一样是商品数量不能小于1，要判断一下
    $(".decrement").click(function () {
        var n = $(this).siblings(".itxt").val();
        n <= 1 ? n : n--;
        $(this).siblings(".itxt").val(n);
        // 小计模块
        var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // toFixed(2)保留两位小数
        var price = (num * n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    })

    // (3)直接修改文本框改变数量
    $(".itxt").change(function () {
        var n = $(this).val();
        var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
        // toFixed(2)保留两位小数
        var price = (num * n).toFixed(2);
        $(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
        getSum();
    })

    // 4、 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据

    // 声明变量来存储已选商品数以及总额，用each()遍历已选商品。
    function getSum() {
        var count = 0;
        var money = 0;
        // 只遍历选中的商品   each遍历，i为索引，ele为对象
        $(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function (i, ele) {
            count += parseInt($(ele).val());   // 会有小误差，要取整一下
        })
        $(".amount-sum em").text(count);
        $(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function (i, ele) {
            money += parseFloat($(ele).text().substr(1));
        })
        $(".price-sum em").text("￥" + money.toFixed(2));
    }


    // 5、店铺的全选复选框的点击改变事件
    $('.J_CheckBoxShop').change(function(){
        if ($(this).prop("checked")) {
            // 设置选中
            $(this).parents('.shop').find(".j-checkbox").prop('checked',true);
            // 设置选中样式
            $(this).parents('.shop').find(".cart-item").addClass("check-cart-item");
        }else{
            // 清除选中
            $(this).parents('.shop').find(".j-checkbox").prop('checked',false);
            // 清楚选中状态
            $(this).parents('.shop').find(".cart-item").removeClass("check-cart-item");
        }

        shopAllcheck()
    })


    // 删除单个商品
    $(".p-action a").click(function () {
        // $(this).parents(".cart-item").remove();
        var item = $(this).parents(".shop").find('.j-checkbox').length;//获取当前店铺的checkbox的数量
        var isShopCheck = $(this).parents(".shop").find('.J_CheckBoxShop').prop('checked')//获取当前店铺是否为全选中状态
        console.log(item,'删除单个商品时，输出当前店铺选中的商品个数')
        if(item > 1){
            // 移除当前商品
            $(this).parents(".cart-item").remove();
            // 获取删除某个商品后的商品数量
            var currentItem = $(this).parents(".shop").find('.j-checkbox').length;
            var currentItem_check = $(this).parents(".shop").find('.j-checkbox:checked').length
            if(currentItem = currentItem_check){
                $(this).parents('.shop').find('.J_CheckBoxShop').prop('checked',true)
            } else {
                $(this).parents('.shop').find('.J_CheckBoxShop').prop('checked',false)
            }
        } else if( item == 1){
            // 如果只有一个商品，则直接删除店铺
            $(this).parents(".shop").remove();
        }
        getSum();
    })
    // 删除选中商品
    $(".remove-batch").click(function () {
        // $(".j-checkbox:checked").parents(".cart-item").remove();//删除操作
        var item_check = $('.cart-item-list').find('.j-checkbox:checked');
        if(item_check.length == 0){
            // alert('暂无可删除记录')
        } else {
            // // 遍历
            for(var i = 0; i < item_check.length; i++){
                // 如果该商品的店铺全选复选框是选中状态，则说明删除的是整个店铺及店铺商品信息;
                // 否则就只删除该商品
                if($(item_check[i]).parents('.shop').find('.J_CheckBoxShop').prop('checked')){
                    $(item_check[i]).parents('.shop').remove()
                } else {
                    $(item_check[i]).parents('.cart-item').remove()
                }
            }
        }
        console.log(item_check,'输出选中的商品数组')
        getSum();

        // 并判断当前店铺是否还有选中的商品，如果有则继续，否则删除掉当前店铺
    })
    // 清理购物车
    $(".clear-all").click(function () {
        $(".shop").remove()//删除店铺
        getSum();
    })


    // 购物车店铺的全选---已用
    function  shopAllcheck() {
        // var item =$('.mui-content').children('.commlistFrm').find('.GoodsCheck').length;//获取购物车checkbox的数量
        var item = $('.cart-item-list').find('.j-checkbox').length;//获取购物车checkbox的数量
        var item_check = $('.cart-item-list').find('.j-checkbox:checked').length;
        if(item == item_check){
            $('.checkall').prop('checked',true)
        }
        else {
            $('.checkall').prop('checked',false)
        }

        getSum();
    }


    // /店铺内商品的点击事件
    function shopItemCheck(t){
        // t是某个商品
        var item =$(t).parents('.shop').find('.j-checkbox').length;//获取店铺内商品的checkbox的数量
        var item_check = $(t).parents('.shop').find('.j-checkbox:checked').length;//获取店铺内商品的checkbox选中的数量
        if(item ==item_check){
            // 如果店铺内的商品数量等于商品选中的数量，说明点普内商品全选，则让店铺全选复选框选中
            $(t).parents('.shop').find(".J_CheckBoxShop").prop('checked',true);
        }else{
            $(t).parents('.shop').find(".J_CheckBoxShop").prop('checked',false);
        }
    }
</script>