因為今天下午時候在網上買了東西，在結算界面的時候突發奇想的也想自己動手做一個結算界面，當然了，只是一個最簡易的結算界面，有商品數量的加減，有單價和小計，單個多個刪除，全選和區縣全選等等一些小功能，我在上大學時候用過，相信不少初學者也會用到或者有些迷惑。這是我寫的第一篇原創作品，一來當做自己的成長記錄以及學習筆記，二來為在這給購物車結算方面的初學者當個參考。本篇側重對象為初學者，請大牛一笑而過。廢話不多說，開始正題。
首先，給大家看看最終的成型界面：隨着鼠標單擊加減號，數量跟着變化，並且小計和總價也跟着隨時更新變化，且當數量為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;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="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;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>.00￥</strong> </p> </div> </div> </body> </html>
以上就是全部代碼了，這里主要描述的是基本實現功能，樣式美觀什么的只做了簡單的調整，有強迫症的同道可以自己去細細美化一下。本文相信會幫到一部分人的，因為我自己平時也在園子里看過很多的優質實用的文章和例子，也在困惑的時候在其中找到了一些答案，解過不少燃眉之急，所有對於這種直接或者間接的幫助，我個人還是滿懷感激的。所有也希望這篇文章幫到需要的人。
收尾：其實，上述的全選和取消全選功能這兩個功能可以合並成一個功能的，在這里分開寫是為了大家更容易理解和掌握。本文就到此結尾了，有興趣的朋友可以這基礎之上添加和擴展更多的功能。