因为今天下午时候在网上买了东西，在结算界面的时候突发奇想的也想自己动手做一个结算界面，当然了，只是一个最简易的结算界面，有商品数量的加减，有单价和小计，单个多个删除，全选和区县全选等等一些小功能，我在上大学时候用过，相信不少初学者也会用到或者有些迷惑。这是我写的第一篇原创作品，一来当做自己的成长记录以及学习笔记，二来为在这给购物车结算方面的初学者当个参考。本篇侧重对象为初学者，请大牛一笑而过。废话不多说，开始正题。

首先，给大家看看最终的成型界面：随着鼠标单击加减号，数量跟着变化，并且小计和总价也跟着随时更新变化，且当数量为0时，减号不可用。

为了大家看得方便，我把整篇源码按照顺序原封不动贴了上来，并且对应的做了较为详细的注释，在此提示要注意jQuery文件的路径是否正确，否则运行后是看不到想要的效果的。
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>最简易的购物车结算流程</title>

    <!--引用jQuery-->

    <script src="Scripts/jquery-3.2.1.min.js"></script>

    <!--<script src="jquery-1.11.0.min.js"></script>-->

    <script>

        $(function () {

            //计算总价，编写总价方法

            function totalPrice() {

                var zong = ;

                $(".xiaoji").each(function () {

                    var all = parseInt($(this).text());

                    zong += all;

                })

                $("#heji").val(zong);

            };

            //设置数量框不可手动填写（此处为避免不必要的操作失误）

            $(".textNum").prop("disabled", true);

            //减号逻辑

            $(".reduce").click(function () {

                var num = $(this).siblings(".textNum").val();  //获取数量框里的数值

                num--;  //单击“-”减号时，数量递减

                $(this).siblings(".textNum").val(num); //把数量变化后的新值放入数量框中

                if (num <= ) {

                    $(this).prop("disabled", true); //当输入框内数值为0时，使“-”减号处于不可用状态。

                };

                var danjia = $(this).siblings(".danjia").text(); //获取单价

                var xiaoji = danjia * num; //用单价乘以数量计算得到单个小计的值

                $(this).siblings(".xiaoji").text(xiaoji); //把得到的小计值放入数量框中显示

                totalPrice();//调用“总价”方法，使每点击减号，数量变化时，总价跟着变化

            })

            //加号逻辑（逻辑如同减号的逻辑差不多）

            $(".add").click(function () {

                var num = $(this).siblings(".textNum").val();

                num++;

                $(this).siblings(".textNum").val(num);

                if (num > ) {

                    $(this).siblings(".reduce").prop("disabled", false); //判断当输入框内数值大于0，使“-”减号处于解封可用状态。

                };

                var danjia = $(this).siblings(".danjia").text();

                var xiaoji = danjia * num;

                $(this).siblings(".xiaoji").text(xiaoji);

                totalPrice();

            })

            //点击合计重整清算(防止单行删除某项商品后，总价不刷新)

            $("#he").click(function () {

                totalPrice(); //调用总价方法

            })

            //单行删除商品

            $(".deleteOne").click(function () {

                $(this).parent().remove();

            })

            ////全部删除商品

            $("#deleteAll").click(function () {

                $(".box:checked").parent().remove(); //把被选中的复选框所在的区域删除

            })

            //全选

            $("#allSelect").click(function () {

                $(".box").prop("checked", true);

            })

            //取消全选

            $("#notSelect").click(function () {

                $(".box").prop("checked", false);

            });

            //全部清零

            $("#zero").click(function () {

                $(".textNum").val();

                $(".xiaoji").text();

                $("#heji").val();

            });

        })

    </script>

    <style>

        /*数量框字体居中*/

        .textNum {

            text-align: center;

        }

        /*****/

        span {

            color: red;

        }

        label {

            margin-left: 20px;

        }

        input[value='删除'] {

            color: green;

        }

        /*总价格颜色*/

        #heji {

            color: red;

            font-size: 1em; /*字体大小为原来的1倍*/

        }

    </style>

</head>

<body>

    <div id="bigbox">

        <div id="container" style="height:220px;width:620px;border:1px solid gray;margin:0 auto;">

            <p>

                <input type="checkbox" name="quanxuan" value="" class="box" />

                <label>数量：</label>

                <input type="button" name="name" value="-" class="reduce" />

                <input type="text" name="name" value="" class="textNum" />

                <input type="button" name="name" value="+" class="add" />

                <label>单价：</label>

                <span class="danjia"></span><strong>￥ |</strong>

                <label>小计：</label>

                <span class="xiaoji"></span><strong>￥</strong>

                <input type="button" name="name" value="删除" class="deleteOne" />

            </p>

            <p>

                <input type="checkbox" name="quanxuan" value="" class="box" />

                <label>数量：</label>

                <input type="button" name="name" value="-" class="reduce" />

                <input type="text" name="name" value="" class="textNum" />

                <input type="button" name="name" value="+" class="add" />

                <label>单价：</label>

                <span class="danjia"></span><strong>￥ |</strong>

                <label>小计：</label>

                <span class="xiaoji"></span><strong>￥</strong>

                <input type="button" name="name" value="删除" class="deleteOne" />

            </p>

            <p>

                <input type="checkbox" name="quanxuan" value="" class="box" />

                <label>数量：</label>

                <input type="button" name="name" value="-" class="reduce" />

                <input type="text" name="name" value="" class="textNum" />

                <input type="button" name="name" value="+" class="add" />

                <label>单价：</label>

                <span class="danjia"></span><strong>￥ |</strong>

                <label>小计：</label>

                <span class="xiaoji"></span><strong>￥</strong>

                <input type="button" name="name" value="删除" class="deleteOne" />

            </p>

            <p>

                <input type="checkbox" name="name" value="" class="box" />

                <label>数量：</label>

                <input type="button" name="name" value="-" class="reduce" />

                <input type="text" name="name" value="" class="textNum" />

                <input type="button" name="name" value="+" class="add" />

                <label>单价：</label>

                <span class="danjia"></span><strong>￥ |</strong>

                <label>小计：</label>

                <span class="xiaoji"></span><strong>￥</strong>

                <input type="button" name="name" value="删除" class="deleteOne" />

            </p>

            <hr />

            <p style="height:30px;width:470px;margin-left:60px;margin:0 auto;">

                <input type="button" name="name" value="全选" id="allSelect" />

                <input type="button" name="name" value="取消全选" id="notSelect" />

                <input type="button" name="name" value="批量删除" id="deleteAll" />

                <input type="button" name="name" value="清零" id="zero" />

                <input type="button" name="name" value="合计总价" id="he" />

                <input type="text" name="name" value="" id="heji" style="width:100px;" />

                <strong>.￥</strong>

            </p>

        </div>

    </div>

</body>

</html>

以上就是全部代码了，这里主要描述的是基本实现功能，样式美观什么的只做了简单的调整，有强迫症的同道可以自己去细细美化一下。本文相信会帮到一部分人的，因为我自己平时也在园子里看过很多的优质实用的文章和例子，也在困惑的时候在其中找到了一些答案，解过不少燃眉之急，所有对于这种直接或者间接的帮助，我个人还是满怀感激的。所有也希望这篇文章帮到需要的人。

收尾：其实，上述的全选和取消全选功能这两个功能可以合并成一个功能的，在这里分开写是为了大家更容易理解和掌握。本文就到此结尾了，有兴趣的朋友可以这基础之上添加和扩展更多的功能。

使用jQuery制作一个简易的购物车结算流程的更多相关文章

  1. 用XMLHttpRequest制作一个简易ajax

    概述 jquery退出历史舞台之后,我们怎么来发送ajax请求呢?可以用相关的库,也可以自己制作一个简易的ajax. 需要说明的是,我们使用的是XMLHttpRequest 2,它几乎兼容所有主流浏览 ...

  2. jQuery 开发一个简易插件

    jQuery 开发一个简易插件 //主要内容 $.changeCss = function(options){ var defaults = { color:'blue', ele:'text', f ...

  3. 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

    查看本章节 查看作业目录 需求说明: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具 实现思路: 使用history对象中的 forward() 方法和 ...

  4. iOS:制作一个简易的计算器

    初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. // // ViewController.m // 计算器 // // Created ...

  5. 使用Windows Form 制作一个简易资源管理器

    自制一个简易资源管理器----TreeView控件 第一步.新建project,进行基本设置:(Set as StartUp Project:View/Toolbox/TreeView) 第二步.开始 ...

  6. Opencv探索之路（二十）：制作一个简易手动图像配准工具

    近日在做基于sift特征点的图像配准时遇到匹配失败的情况,失败的原因在于两幅图像分辨率相差有点大,而且这两幅图是不同时间段的同一场景的图片,所以基于sift点的匹配已经找不到匹配点了.然后老师叫我尝试 ...

  7. 用jquery制作一个简单的导航栏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  8. jquery书写一个简易的二级联动

    先用php生成一个json数组示例如下 JSON_UNESCAPED_UNICODE 是对汉字进行处理的参数 然后HTML代码如下 把那个json_city赋值成我们用php生成的json即可 < ...

  9. 制作一个简易计算器——基于Android Studio实现

    一个计算器Android程序的源码部分分为主干和细节两部分. 一.主干 1. 主干的构成 计算器的布局 事件(即计算器上的按钮.文本框)监听 实现计算 2. 详细解释 假设我们的项目名为Calcula ...

随机推荐

  1. Python测试开发之函数

    对于初学者而言,感觉函数还是不是很好理解,尤其是当写一个脚本,或者是写一个算法,认为可能for循环就已经可以解决的问题为什么还要用函数来实现呢? 今天就来说一下函数的优点,其实函数的最大优点就是可重用 ...

  2. php简单实现发微博动态

    首先,肯定是注册成为开发者新浪微博开放平台 选择网站应用,填写一些基本信息 填完后在'我的应用'中,会看到刚创建的应用信息,我们只是简单的测试一下,所以其他复杂的注册信息都不用填写,有这些就够了 很重 ...

  3. vue 二进制文件的下载（解决乱码和解压报错）

    问题描述:项目中使用的是vue框架进行开发,因为文件下载存在权限问题,所以并不能通过 a 链接的 href 属性直接赋值 URL进行下载, (如果你的文件没有下载权限,可以直接通过href属性赋值UR ...

  4. 异步编程Async/await关键字

    异步编程Async \await 关键字在各编程语言中的发展(出现)纪实. 时间 语言版本 2012.08.15 C#5.0(VS2012) 2015.09.13 Python 3.5 2016.03 ...

  5. DotNetCore跨平台~xUnit生成xml报告

    在CI/CD流行至极的今天,你的项目没有自动化测试绝对是不可以接受的,在进行自动化部署和持续集成时,我们的dotnet core项目也是可以实现自动化的,之前说过gitlab,jenkins对持续集成 ...

  6. Java内存管理（一）

    好久没有写博客了,深感羞愧,今天聊一下Java的内存管理 简单介绍 Java相比传统语言(C,C++)的一个优势在于其能够自己主动管理内存.从而将开发人员管理内存任务剥离开来. 本文大体描写叙述了J2 ...

  7. Cacti监控一台Webserver上多个Tomcatport的实现

    由于一台web应用server上面安装了多台tomcat,有多个port.比方默认的8080,还有兴许追加的9100,9300,9500等等.一个cacti_host_template_tomcat_ ...

  8. uva--10700

    题意: 输入一串仅仅含有+和*号的表达式,能够通过加入括号来改变表达式的值,求表达式的最大最小值. 思路: 表达式中的数都是不大于20的正整数,由a*b+c<=a*(b+c)能够知道.先算乘法后 ...

  9. AVL树 & 重平衡概念

    AVL树是有平衡条件的二叉搜索树.这个平衡条件必须容易保持,而且需要保证树的深度是O(logN). AVL=BBST 作为二叉搜索树的最后一部分,我们来介绍最为经典的一种平衡二叉搜索树:AVL树.回顾 ...

  10. Ubuntu 报错 sudo: unable to resolve host

    Ubuntu 在每次执行命令的时候,会报如下错误: $ sudo sudo: unable to resolve host iZ2zecsdy8flu603bmdg1bZ iZ2zecsdy8flu6 ...