因为今天下午时候在网上买了东西，在结算界面的时候突发奇想的也想自己动手做一个结算界面，当然了，只是一个最简易的结算界面，有商品数量的加减，有单价和小计，单个多个删除，全选和区县全选等等一些小功能，我在上大学时候用过，相信不少初学者也会用到或者有些迷惑。这是我写的第一篇原创作品，一来当做自己的成长记录以及学习笔记，二来为在这给购物车结算方面的初学者当个参考。本篇侧重对象为初学者，请大牛一笑而过。废话不多说，开始正题。
首先，给大家看看最终的成型界面：随着鼠标单击加减号，数量跟着变化，并且小计和总价也跟着随时更新变化，且当数量为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 = 0; $(".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 <= 0) { $(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 > 0) { $(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(0); $(".xiaoji").text(0); $("#heji").val(0); }); }) </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;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="2" class="textNum" /> <input type="button" name="name" value="+" class="add" /> <label>单价：</label> <span class="danjia">2</span><strong>￥ |</strong> <label>小计：</label> <span class="xiaoji">4</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="2" class="textNum" /> <input type="button" name="name" value="+" class="add" /> <label>单价：</label> <span class="danjia">2</span><strong>￥ |</strong> <label>小计：</label> <span class="xiaoji">4</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="2" class="textNum" /> <input type="button" name="name" value="+" class="add" /> <label>单价：</label> <span class="danjia">2</span><strong>￥ |</strong> <label>小计：</label> <span class="xiaoji">4</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="2" class="textNum" /> <input type="button" name="name" value="+" class="add" /> <label>单价：</label> <span class="danjia">2</span><strong>￥ |</strong> <label>小计：</label> <span class="xiaoji">4</span><strong>￥</strong> <input type="button" name="name" value="删除" class="deleteOne" /> </p> <hr /> <p style="height:30px;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="100px;" /> <strong>.00￥</strong> </p> </div> </div> </body> </html>
以上就是全部代码了，这里主要描述的是基本实现功能，样式美观什么的只做了简单的调整，有强迫症的同道可以自己去细细美化一下。本文相信会帮到一部分人的，因为我自己平时也在园子里看过很多的优质实用的文章和例子，也在困惑的时候在其中找到了一些答案，解过不少燃眉之急，所有对于这种直接或者间接的帮助，我个人还是满怀感激的。所有也希望这篇文章帮到需要的人。
收尾：其实，上述的全选和取消全选功能这两个功能可以合并成一个功能的，在这里分开写是为了大家更容易理解和掌握。本文就到此结尾了，有兴趣的朋友可以这基础之上添加和扩展更多的功能。