实现购物车自动计价功能

最新推荐文章于 2022-01-20 23:42:48 发布
原创 最新推荐文章于 2022-01-20 23:42:48 发布 · 576 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#插件 #购物车

本文介绍了一种使用jQuery实现的购物车自动计价功能。该功能可根据用户选择的商品数量和单价实时更新总金额，并支持全选、取消选择等操作。

借用shoppingCart插件,实现购物车的自动计价功能。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/jquery-1.7.2.min.js"></script>
    <link rel="stylesheet" href="../../css/cart.css">
    <script>
        /**
         * Created by Herb Steve on 2014/5/24.
         */
        $(function() {
            var adds=$('.add');
            var mins =$('.min');
            var selects = $('.goodsList input[type=checkbox]');
            var prices =$('.price');
            var nums =$('.num')
            function getTotal(){
                var total=0;
                for(var i=0;i<selects.length;i++){
                    var select =selects.eq(i);
                    if(select.attr("checked")){
                       var num =nums.eq(i).val();
                       var price = prices.eq(i).text();
                        total = parseFloat(total)+parseFloat(num)*parseFloat(price);
                    }
                }

                $('#total').text(total.toFixed(2));
            };

                selects.click(function(){
                    getCount();
                    getTotal();
                });

            adds.on('click',function(){
                var num= $(this).siblings('.num');
               console.log("fasdfasd");
                num.val(parseInt(num.val())+1);
                getTotal();
            });

            nums.on('change',function(){
                getTotal();
            });

            mins.on('click',function(){
                var num =$(this).siblings('.num');
                if(num.val()>1) {
                    num.val(parseInt(num.val()) - 1);
                    getTotal();
                }
            });



            $('.common #selectAll').on("click",function(){
                    for(var i=0;i<selects.length;i++){
                        selects.eq(i).attr("checked",true);
                    }

                    getCount();
                    getTotal();
            });

            $(' #cancel').on("click",function(){
                for(var i=0;i<selects.length;i++){
                    selects.eq(i).attr("checked",false);

                }
                getTotal();
                $('#count').text(0);
            });

           function getCount(){
               var count=0;
                for( var i=0;i<selects.length;i++){
                    if(selects.eq(i).attr("checked")){
                        count++;
                    }
                }
               $('#count').text(count);
            }


        });
    </script>
</head>
<body>
<div class="shoppingCart">
    <div class="header">
            <div class="Content">
                <span class="common firstTab">选中</span>
                <span class="common secondTab">商品</span>
                <span class="common thirdTab">单价</span>
                <span class="common fourthTab">数量</span>
                <span class="common lastTab">操作</span>
        </div>
    </div>
    <div class="goodsList">
            <div class="listContent">
                <span class="firstTab common">
                     <input  type="checkbox"/>
                </span>
                <div class="secondTab common">
                    <img class="goodsImg" src="../../img/1.jpg">
                    <a class="goodsLink" href="">
                               做最好用的平板做最好用的平板
                               做最好用的平板
                               做最好用的平板
                    </a>
                </div>
                <span class="thirdTab common price specialItem ">1499</span>
                <div class="fourthTab common">
                    <input type="button" class="min" value="-">
                    <input type="text" class="num" value="1">
                    <input type="button" class="add" value="+">
                </div>
                <a class="lastTab common" href="">删除</a>
        </div>
    </div>

    <div class="goodsList">
        <div class="listContent">
                <span class="firstTab common">
                     <input  type="checkbox"/>
                </span>
            <div class="secondTab common">
                <img class="goodsImg" src="../../img/1.jpg">
                <a class="goodsLink" href="">
                    做最好用的平板做最好用的平板
                    做最好用的平板
                    做最好用的平板
                </a>
            </div>
            <span class="thirdTab common price specialItem ">1499</span>
            <div class="fourthTab common">
                <input type="button" class="min" value="-">
                <input type="text" class="num" value="1">
                <input type="button" class="add" value="+">
            </div>
            <a class="lastTab common" href="">删除</a>
        </div>
    </div>


    <div class="goodsList">
        <div class="listContent">
                <span class="firstTab common">
                     <input  type="checkbox"/>
                </span>
            <div class="secondTab common">
                <img class="goodsImg" src="../../img/1.jpg">
                <a class="goodsLink" href="">
                    做最好用的平板做最好用的平板
                    做最好用的平板
                    做最好用的平板
                </a>
            </div>
            <span class="thirdTab common price specialItem ">1499</span>
            <div class="fourthTab common">
                <input type="button" class="min" value="-">
                <input type="text" class="num" value="1">
                <input type="button" class="add" value="+">
            </div>
            <a class="lastTab common" href="">删除</a>
        </div>
    </div>



    <div class="footer">
            <div class="Content">

                    <div class="common">
                        <input class="selectBtn" id="selectAll"  type="button" value="全选">

                        <input class="selectBtn" id="cancel" type="button" value="取消选择">
                    </div>

                <div class="common count" >
                    选中商品数:
                    <span id="count" class="specialItem">
                        0
                    </span>
                </div>
                <div class="common total">
                    总金额:<span id="total" class="specialItem">0.00</span>
                </div>
            </div>
    </div>

</div>
</body>
</html>

实现的效果图如下：


购物车价格自动计算
12-23
session保存数据结算，无刷新效果，添加删除，添加购物车
jQuery购物车自动计算金额表单
06-01
NULL 博文链接：https://zhitangrui2010.iteye.com/blog/2219537
下单自动计算总金额demo
10-10
一个简单的下单页Demo，可以用加号按钮、减号按钮、和直接填写的三种方式修改数量。然后自动计算出小计和总计。
用js实现购物车自动计价功能
04-29 3253
       当选择修改数据后将自动计算每一个物品的的总价,并重新计算所有物品的总价.因为没有做太多兼容性的东西,所以只在firefox下测试过.DOM         物品编号物品名称数量价格小计             jsp_123电脑19501950        jsp_123电脑19501950        jsp_123电脑19501950        jsp_1
购物车自动结算功能
热门推荐
ITDragon博客
12-20 1万+
选中商品后更改商品数量和删除商品，自动计算总价。 效果图： 代码： 购物车 *{margin: 0;padding: 0} a{text-decoration: none;} ul li{float: left;list-style: none;} #wrapper{max-width: 640px;min-width
vue实现购物车结算功能
10-15
在实现购物车结算功能时，Vue.js能够有效地组织代码，并实现数据流的管理和用户交互。以下将详细介绍如何使用Vue.js实现购物车结算功能的关键知识点。 ### 1. 响应式数据绑定 在Vue.js中，数据是通过数据对象与...
Android购物车功能实现：单选全选计价与编辑删除
第三，“**计价功能**”是购物车的核心业务逻辑之一。系统需实时计算已被选中的商品总价与总数量。这一过程通常封装在一个独立的方法中，如calculateTotalPrice()，遍历所有数据项，筛选出isSelected为true的商品，...
jQUery购物车加减计价与全选全不选
11-02
在这个"jQuery购物车加减计价与全选全不选"的主题中，我们将探讨如何利用jQuery来实现购物车的基本操作。 1. **商品添加与删除**： - 添加：当用户点击“加入购物车”按钮时，可以通过jQuery获取商品ID和数量，...
实现累加计价的购物车特效：jQuery+HTML5教程
在本资源中，累加计价功能是通过jQuery来实现的，每当用户操作购物车时，总价会实时更新，提高用户购物的便利性。 知识点5：资源的收集和整理 本资源由【A5源码】收集整理，这表明了本资源是经过精心挑选和整理的，...
基于Java WebDriver的购物车功能自动化测试实践
该项目的核心目标是模拟真实用户在电商类网站中的典型操作流程，包括页面导航、商品选择、购物车管理以及价格合计验证等关键功能点的测试。整个测试过程不仅涵盖了基础的浏览器自动化操作，还深入涉及了元素定位、...
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
07-15
基于js与jq实现淘宝加入购物车的特效和计算购物车的总金额
Spring Aop实现共享单车按小时计费
05-25
用SpringAop思想写共享单车按小时计费，用代理类来实现计费
jQuery仿淘宝购物车自动结算金额效果
08-08
jQuery仿淘宝购物车自动结算金额效果，可根据商品单位和用户选购数量自动计算商品总值，适时计算，ajax 方式，用户修改产品时，最终的计算结果也会发生变化，适合用于在线购物一类的网站使用的网页特效。
购物车脚本.sh
07-03
简单入门linux下的shell脚本，实现基本购物车功能，输入金额、选择购买商品、选择是否继续购买，结算订单、显示余额等功能。
超市购物系统
07-04
jsp+mysql开发应用，myeclipse应用平台开发，简单的期末大作业！
html计算商品金额,javascript实现点击商品列表checkbox实时统计金额的方法
weixin_39830313的博客
06-29 652
/p>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">商品列表统计金额body,div,p{margin:0;padding:0;font-size:14px;}#sumMoney{font-size:26px;font-weight:bold;color:Red;}//全选和全清function checkAll()...
实现购物车加减计价功能
weixin_33829657的博客
09-23 331
直接复制粘贴即可 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l...
【代码】模拟购物车添加物品，和计算金额，主要思路就是当按钮被点击时候，展示的内容要进行怎样的变化
weixin_52226593的博客
01-20 1300
<table border="1" align="center" width="500"> <tr> <td>品牌</td> <td>价格</td> <td></td> <td></td> </tr> <tr> <td>小米</td> <td>5000</t.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值