jQuery实现购物车 批量删除、单个删除，实现计费功能

最新推荐文章于 2024-06-12 21:52:13 发布
最新推荐文章于 2024-06-12 21:52:13 发布
阅读量5.4k 收藏 14
点赞数 3
文章标签： jquery HTML css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Darkman_EX/article/details/80967573
版权

购物车批量删除、单个删除，实现计费功能

本案例使用js的是jquery，需要自行在网页下载。至于使用的图片，可以根据自己的情况添加试验的图片。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            * { 
                margin: 0;
                padding: 0;
            }
            body {
                width: 960px;
                margin: 20px auto;
            }
            #cart {
                margin: 0 auto;
                width: 850px;
            }
            #cart-header {
                height: 40px;
                background-color: lightgray;
                margin-bottom: 20px;
            }
            #cart-header div {
                line-height: 40px;
            }
            .left {
                float: left;
            }
            .right {
                float: right;
            }
            .w110 {
                width: 100px;
            }
            .ml10 {
                margin-left: 10px;
            }
            .w120 {
                width: 120px;
            }
            .w250 {
                width: 250px;
            }
            .center {
                text-align: center;
            }
            .w20 {
                width: 20px;
            }
            .w90 {
                width: 90px;
            }
            .clear {
                clear: both;
            }
            #cart-items>div {
                height: 100px;
            }
            #cart-items>div>div {
                line-height: 100px;
            }
            .w250 span {
                display: inline-block;
                font-size: 12px;
                line-height: 16px !important;
            }
            .single-item {
                border-bottom: 1px solid gray;
            }
            .small-button {
                display: inline-block;
                width: 20px;
                height: 20px;
                border: none;
            }
            .big-button {
                color: white;
                background-color: red;
                display: inline-block;
                width: 120px;
                height: 40px;
                border: none;
                font-size: 22px;
            }
            #totalCount, #totalPrice {
                color: red;
            }
            #totalPrice {
                font: bolder 20px Arial;
                display: inline-block;
                width: 150px;
            }
            #cart a {
                text-decoration: none;
            }
            #cart a:link, #cart a:visited, #cart a:active {
                color: gray;
            }
        </style>
    </head>
    <body>
        <div id="cart">
            <div id="cart-header">
                <div class="left w110 ml10">
                    <input id="selectAll" type="checkbox">
                    <label for="selectAll">全选</label>
                </div>
                <div class="left w250">商品</div>
                <div class="left w120 center">单价</div>
                <div class="left w120 center">数量</div>
                <div class="left w120 center">小计</div>
                <div class="left w120 center">操作</div>
            </div>
            <div id="cart-items">
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a1.png">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        海澜之家/Heilan Home春装商务白衬衫男修身HNCAD3A067Y 漂白(69) 漂
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span class="price">138.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input class="center count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>138.00</span></div>
                    <div class="left w120 center">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a2.png">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        HLA海澜之家长袖衬衫男牛津纺休闲干净透气HNEAJ1E048A浅灰
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span class="price">128.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input class="center count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;<span>128.00</span></div>
                    <div class="left w120 center">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
                <div class="clear single-item">
                    <div class="left w20 ml10">
                        <input name="selectOne" type="checkbox">
                    </div>
                    <div class="left w90">
                        <a href="">
                            <img src="img/a3.png">
                        </a>
                    </div>
                    <div class="left w250">
                        <span>
                        HLA海澜之家牛津纺清新休闲衬衫2018春季新品质感柔软长袖衬衫男
                        </span>
                    </div>
                    <div class="left w120 center">&yen;<span class="price">99.00</span></div>
                    <div class="left w120 center">
                        <button class="small-button">-</button>
                        <input class="center count" type="text" size="2" value="1">
                        <button class="small-button">+</button>
                    </div>
                    <div class="left w120 center">&yen;99.00</div>
                    <div class="left w120 center">
                        <a href="javascript:void(0);">删除</a>
                    </div>
                </div>
            </div>
            <div id="cart-footer">
                <div class="clear left">
                    <a id="clearSelected" href="javascript:void(0);">删除选中商品</a>
                </div>
                <div class="right">
                    <span>总共选中了<span id="totalCount">0</span>件商品</span>
                    <span>总计: <span id="totalPrice">&yen;0.00</span></span>
                    <button class="big-button">去结算</button>
                </div>
            </div>
        </div>
        <script src="js/jquery.min.js"></script>
        <script>
            // jQuery中的$函数(jQuery)的作用
            // 1. 如果$函数的参数是一个函数那么该函数绑定文档加载完成后要执行的回调函数
            // 2. 如果$函数的参数是一个选择器字符串那么$函数会返回对应的元素(jQuery对象)
            // 3. 如果$函数的参数是一个标签字符串那么$函数会创建该元素并返回(jQuery对象)
            // 4. 如果$函数的参数是一个原生的JS元素对象那么$函数会将它转变成jQuery对象
            $(function() {
                // this到底是什么要看具体的上下文环境
                // 简单的说函数中的this指的是谁调用了这个函数或者谁引发了这个函数的执行
                $('#selectAll').on('change', function(evt) {
                    // 获取事件源的两种方式: evt.target或者this
                    // 这里拿到的是原生的JavaScript对象
                    if ($(this).prop('checked')) {
                        $('.single-item input[type="checkbox"]').prop('checked', true);
                        calcTotal();
                    } else {
                        $('.single-item input[type="checkbox"]').prop('checked', false);
                        $('#totalCount').text('0');
                        $('#totalPrice').html('&yen;0.00');
                    }
                });

                // 为单个商品项的复选框绑定改变事件
                $('input[name="selectOne"]').on('change', function() {
                    calcTotal();
                    if (!$(this).prop('checked')) {
                        $('#selectAll').prop('checked', false);
                    }
                });

                // 为删除选中商品超链接绑定事件回调
                $('#clearSelected').on('click', function() {
                    if (window.confirm('确定要删除所选商品吗?')) {
                        $('.single-item').each(function() {
                            if ($(this).find('input[name="selectOne"]').prop('checked')) {
                                $(this).remove();
                            }
                        });
                        calcTotal();
                    }
                });

                // 为减少和添加商品数量的按钮绑定事件回调
                $('.single-item button').on('click', function(evt) {
                    $(this).parent().parent().find('input[name="selectOne"]').prop('checked', true);
                    if ($(this).text() == '-') {
                        var count = parseInt($(this).next().val());
                        if (count > 1) {
                            count -= 1;
                            $(this).next().val(count);
                        } else {
                            alert('商品数量最少为1');
                        }
                    } else {
                        var count = parseInt($(this).prev().val());
                        if (count < 200) {
                            count += 1;
                            $(this).prev().val(count);
                        } else {
                            alert('商品数量最多为200');
                        }
                    }
                    var price = parseFloat($(this).parent().prev().find('span').text());
                    $(this).parent().next().html('&yen;' + (price * count).toFixed(2));
                    calcTotal();
                });

                // 为单个商品项删除超链接绑定事件回调
                $('.single-item a').on('click', function() {
                    if (window.confirm('确定要删除该项吗?')) {
                        $(this).parent().parent().remove();
                        calcTotal();
                    }
                });

                // 为商品数量文本框绑定改变事件回调
                $('.single-item input[type="text"]').on('change', function() {
                    $(this).parent().parent().find('input[name="selectOne"]').prop('checked', true);
                    var count = parseInt($(this).val());

                    if (count != $(this).val() || count < 1 || count > 200) {
                        alert('无效的商品数量值');
                        count = 1;
                        $(this).val(count);
                    }
                    var price = parseFloat($(this).parent().prev().find('span').text());
                    $(this).parent().next().html('&yen;' + (price * count).toFixed(2));
                    calcTotal();
                });

                // 计算总计
                function calcTotal() {
                    var checkBoxes = $('input[name="selectOne"]');
                    var priceSpans = $('.single-item .price');
                    var countInputs = $('.single-item .count');
                    var totalCount = 0;
                    var totalPrice = 0;
                    for (var i = 0; i < priceSpans.length; i += 1) {
                        // 复选框被勾中的购物车项才进行计算
                        if ($(checkBoxes[i]).prop('checked')) {
                            // 强调: jQuery对象使用下标运算或get方法会还原成原生的JavaScript对象
                            var price = parseFloat($(priceSpans[i]).text());
                            var count = parseInt($(countInputs[i]).val());
                            totalCount += count;
                            totalPrice += price * count;
                        }
                    }
                    $('#totalCount').text(totalCount);
                    $('#totalPrice').html('&yen;' + totalPrice.toFixed(2));
                }
            });
        </script>
    </body>
</html>
Jerry_JD
关注
  • 3
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
使用jquery实现购物车的添加与删除。
gods_boy的博客
01-02 6135
  要点分析： 1.当购物车里面不存在商品时点击添加商品可以添加进去。 2.当购物车里面存在商品时点击添加商品时会有两种情况。第一种就是购物车里面不存在这种商品可以进行添加。第二种就是如果你想添加的商品购物车本身就存在，那么就需要判重，进行商品个数累加。 3.商品进行全选或者取消。 当你选择全选按钮时，购物车里面的商品全选，如果取消其中的一件商品全选也会被取消，同样，当点击全部单个商品时全选按钮...
Jquery购物车模块-清理购物车和选中商品添加背景颜色
qq_43781887的博客
07-14 782
3.删除选中的商品先判断小的复选框和按钮是否选中状态，如果是选中则删除对应的商品。1.有三个地方需要删除①商品后面的删除按钮②删除选中的商品③清理购物车。1.全选按钮点击如果全选是选中的则所有商品添加背景否则移除背景。2.小的复选框点击如果是选中状态则当前商品添加背景否则移除背景。4.每次删除事件中都要重新调用计算总价格和总数量的函数。2.商品后面的删除按钮点击之后一定是删除当前的商品。3.这个背景可以通过添加和移除类名来实现。2.选中商品添加背景颜色模块。二、选中商品添加背景颜色模块。...
jQuery仿京东手机移动端购物车商品删除特效代码
03-20
jQuery仿京东手机移动端购物车商品删除代码是一款兼容PC端跟手机端的自适应点击垃圾桶删除购物车里的对应物品特效。
day16_购物车(添加购物车,购物车列表查询,删除购物车商品,更新选中商品状态,完成购物车商品的全选,清空购物车)
小丁的博客
03-07 1705
步骤如下所示：1、spzx-service-client模块创建：在spzx-parent下面创建该子模块spzx-service-client，并导入如下依赖：-- openfeign依赖 --> < dependency > < groupId > org.springframework.cloud < artifactId > spring-cloud-starter-openfeign
MyBatis详解
最新发布
这河里吗l的博客
06-12 1555
MyBatis详解 目录 1.MyBatis介绍 2.MyBatis执行流程 3.MyBatis的增删改查(CRUD) 4.ORM映射 5.关联查询 6.延迟加载 7.动态SQL 8.MyBatis缓存介绍
购物车全选全不选，单选，删除，全选删除，计算总价---uniapp+store
m0_72929120的博客
08-03 380
【代码】购物车全选全不选，单选，删除，全选删除，计算总价---uniapp+store。
基于JQuery的购物车添加删除以及结算功能
zljvsmx的博客
03-07 3014
功能齐全的购物车添加删除以及结算
jquery实现购物车基本功能
12-30
购物车里的功能无非是商品数量的加减、商品删除、全选反选等操作，其实现过程如下所示： 1.html代码： <body> 购物车空空如也，快去选购吧 <input type=checkbox class=checkOnly style=...
jQuery+ajax实现批量删除功能完整示例
10-16
本示例将详细讲解如何利用jQuery和ajax技术来实现这一功能，同时结合bootstrap框架和layer.js插件提升用户体验。 首先，批量删除的核心在于用户通过勾选复选框选择待删除的项。在提供的代码片段中，我们看到每个...
jquery实现购物车购物车全选和增加删除商品.zip
10-14
在本项目中，我们主要探讨如何使用jQuery来实现一个具有全选和商品增删功能的购物车。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互，使得创建交互性强的网页变得更为便捷。...
jQuery实现移动端手机商城购物车功能
10-21
本文将详细介绍如何使用jQuery技术来实现一个移动端购物车功能，包括商品数量的增加与减少、计算商品总价等。这些知识点对于移动电商应用开发人员来说尤为重要。 ### jQuery实现购物车功能 使用jQuery来实现移动端...
购物车的商品删除，点击全选，价格计算
09-07
购物车的商品删除，点击全选，价格计算，购物车的商品删除，点击全选，价格计算购物车的商品删除，点击全选，价格计算购物车的商品删除，点击全选，价格计算
基于JQuery的购物车添加删除以及结算功能示例
10-20
本篇文章主要介绍了基于JQuery的购物车添加删除以及结算功能示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。
jQuery手机端购物车商品删除代码.zip
07-04
jQuery手机端购物车商品删除代码，点击购物车垃圾桶删除。
实现购物车结算功能：批量和全部删除，全选和反选，单价和总价，数量增减，页面隐藏和显示
热门推荐
IT666DHW的博客
10-24 2万+
需求： 要求：技术要求（html+css+angularjs） 1.  完成页面布局，如图1.1（button按钮可以用普通按钮） 2.Ø声明数据对象，初始化商品信息，数据自拟且不低于四条 3.  用ng-repaet指令将对象遍历并渲染到页面中 4.Ø点击”+”按钮输入框中的数量加1，同时可以计算出商品小计和购物车总价。同理，当点击”-”按钮时输入框中的数量减1，商品小计和购物车总
jQuery简单实现购物车添加删除操作
Wonf的博客
03-12 1万+
注：示例仅是简单实现，只写body部分内容，未对jQuery文件进行导入。// <body> <table border="1" cellpadding="0" cellspacing="0"> <tr> <td><label><input type='checkbox'/>全选</label></td> <td>商品信息<
jQuery实现购物车的增删改查
每天一个前端小知识~
11-05 2615
一、购物车页面效果图 shop-cart.html的代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>北榛购物车</title> <!-- 引入css 初始化的css 文件 --> <link rel="stylesheet" href="css/base.css"> <!-- 引
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值