使用jQuery制作一个简易的购物车结算流程

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

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

 

 

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

"http://www.w3.org/1999/xhtml">

    "Content-Type" content="text/html; charset=utf-8" />
    
    
    
    
    
    



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

                "checkbox" name="quanxuan" value="" class="box" />
                数量：
                "button" name="name" value="-" class="reduce" />
                "text" name="name" value="2" class="textNum" />
                "button" name="name" value="+" class="add" />
                单价：
                class="danjia">2￥ |
                小计：
                class="xiaoji">4￥
                "button" name="name" value="删除" class="deleteOne" />
            
            

                "checkbox" name="quanxuan" value="" class="box" />
                数量：
                "button" name="name" value="-" class="reduce" />
                "text" name="name" value="2" class="textNum" />
                "button" name="name" value="+" class="add" />
                单价：
                class="danjia">2￥ |
                小计：
                class="xiaoji">4￥
                "button" name="name" value="删除" class="deleteOne" />
            
            

                "checkbox" name="quanxuan" value="" class="box" />
                数量：
                "button" name="name" value="-" class="reduce" />
                "text" name="name" value="2" class="textNum" />
                "button" name="name" value="+" class="add" />
                单价：
                class="danjia">2￥ |
                小计：
                class="xiaoji">4￥
                "button" name="name" value="删除" class="deleteOne" />
            
            

                "checkbox" name="name" value="" class="box" />
                数量：
                "button" name="name" value="-" class="reduce" />
                "text" name="name" value="2" class="textNum" />
                "button" name="name" value="+" class="add" />
                单价：
                class="danjia">2￥ |
                小计：
                class="xiaoji">4￥
                "button" name="name" value="删除" class="deleteOne" />
            
            

            
"height:30px;width:470px;margin-left:60px;margin:0 auto;">
                "button" name="name" value="全选" id="allSelect" />
                "button" name="name" value="取消全选" id="notSelect" />
                "button" name="name" value="批量删除" id="deleteAll" />
                "button" name="name" value="清零" id="zero" />
                "button" name="name" value="合计总价" id="he" />
                "text" name="name" value="" id="heji" style="width:100px;" />
                .00￥
            
        
    

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

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

 

转载于:https://www.cnblogs.com/threeblue/p/8185005.html