快捷導(dǎo)航

jquery實(shí)現(xiàn)購(gòu)物車(chē)基本功能

更新時(shí)間：2019年10月25日 14:27:02 作者：smile@qingqing

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)購(gòu)物車(chē)基本功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

購(gòu)物車(chē)?yán)锏墓δ軣o(wú)非是商品數(shù)量的加減、商品刪除、全選反選等操作，其實(shí)現(xiàn)過(guò)程如下所示：

1.html代碼：

<body>
 <div class="empty">
 購(gòu)物車(chē)空空如也，<a href="javascript:void(0);" >快去選購(gòu)吧</a>
 </div>
 <table border="2px solid #ccc" id="table">
 <thead>
 <th>
 <input type="checkbox" class="checkOnly" style="vertical-align:middle;margin-right:20px;">全選
 </th>
 <th>序號(hào)</th>
 <th>商品名稱(chēng)</th>
 <th>數(shù)量</th>
 <th>單價(jià)</th>
 <th>小計(jì)</th>
 <th>操作</th>
 </thead>
 <tbody>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">1</td>
 <td>烤煎餅</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>單價(jià)：
 <span class="price">2</span>
 </td>
 <td>
 小計(jì)：
 <span class="prices">2</span>
 </td>
 <td>
 <a href="#" class="del">刪除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">2</td>
 <td>珍珠奶茶</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>單價(jià)：
 <span class="price">4</span>
 </td>
 <td>
 小計(jì)：
 <span class="prices">4</span>
 </td>
 <td>
 <a href="#" class="del">刪除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">3</td>
 <td>水煮魚(yú)</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>單價(jià)：
 <span class="price">20</span>
 </td>
 <td>
 小計(jì)：
 <span class="prices">20</span>
 </td>
 <td>
 <a href="#" class="del">刪除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">4</td>
 <td>蛋糕</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>單價(jià)：
 <span class="price">50</span>
 </td>
 <td>
 小計(jì)：
 <span class="prices">50</span>
 </td>
 <td>
 <a href="#" class="del">刪除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">5</td>
 <td>土豆片</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>單價(jià)：
 <span class="price">5</span>
 </td>
 <td>
 小計(jì)：
 <span class="prices">5</span>
 </td>
 <td>
 <a href="#" class="del">刪除</a>
 </td>
 </tr>
 <tr>
 <td>
 <input type="checkbox" class="check">
 </td>
 <td class="num">6</td>
 <td>蛋黃派</td>
 <td>
 <span>
 <input type="button" value="-" class="reduces">
 <span class="span">1</span>
 <input type="button" value="+" class="adds">
 </span>
 </td>
 <td>單價(jià)：
 <span class="price">5.5</span>
 </td>
 <td>
 小計(jì)：
 <span class="prices">5.5</span>
 </td>
 <td>
 <a href="#" class="del">刪除</a>
 </td>
 </tr>
 <tr>
 <td colspan="7" class="talast">
 <span>商品一共
 <span class="goods_num" style="color:red;font-size:20px;">0</span> 件; 共計(jì)花費(fèi)
 <span class="pricetal" style="color:red;font-size:20px;">0</span> 元; 其中最貴的商品單價(jià)是
 <span class="pricest" style="color:red;font-size:20px;">0</span> 元</span>
 </td>
 </tr>
 </tbody>
 </table>
</body>

2.css代碼：

<style type="text/css">
 table {
 width: 1000px;
 /* height: 300px; */
 border-collapse: collapse;
 table-layout: fixed;
 text-align: center;
 font-size: 18px;
 margin: 0 auto;
 }

 a {
 text-decoration: none;
 color: black;
 }

 tr {
 height: 50px;
 }

 .check {
 width: 20px;
 height: 20px;
 }

 .checkOnly {
 width: 20px;
 height: 20px;
 }

 .empty {
 font-size: 25px;
 position: fixed;
 top: 45%;
 left: 45%;
 display: none;
 }

 .empty a {
 color: pink;
 }

 .empty a:hover {
 text-decoration: underline;
 }
 </style>

3.js代碼：

<script src="js/jquery-1.8.3.min.js"></script> //引入jquery
<script src="js/Allcheck.js"></script> //引入封裝好的全選反選插件
<script>
 $(function () {
 $(".adds").each(function () { //點(diǎn)擊增加的按鈕
 $(this).click(function () {
 //1.改變數(shù)量 
 var count = parseFloat($(this).parents("tr").find(".span").html());
 count++;
 $(this).parent("span").find(".span").html(count);
 //2.改小計(jì)(先找到單價(jià)與數(shù)量，再相乘，最后放在小計(jì)(“.prices”)里)
 var price = parseFloat($(this).parents("tr").find(".price").html());
 var money = (price * count);
 $(this).parents("tr").find(".prices").html(money);
 //3.改總價(jià)
 total();
 countAll();//最后的總數(shù)量
 compare();//選中復(fù)選框時(shí)比較商品單價(jià)中最高的
 });
 });
 $(".reduces").each(function () {//點(diǎn)擊減少的按鈕
 $(this).click(function () {
 //1.改變數(shù)量 
 var count = parseFloat($(this).parents("tr").find(".span").html());
 count--;
 if (count < 1) { //當(dāng)數(shù)量減到1時(shí)不能再減
 return;
 }
 $(this).parent("span").find(".span").html(count);
 //2.改小計(jì)
 var price = parseFloat($(this).parents("tr").find(".price").html());
 var money = (price * count);
 $(this).parents("tr").find(".prices").html(money);
 total();
 countAll();//最后的總數(shù)量
 compare();//選中復(fù)選框時(shí)比較商品單價(jià)中最高的
 });
 });
 //刪除
 $(".del").each(function () {
 $(this).click(function () {
 let re = $(this).parents("tr"); //找到要?jiǎng)h除的行
 if (confirm("你確定刪除嗎？")) {
 re.remove();
 }
 total();
 countAll(); //總數(shù)量
 compare(); //最貴的
 //刪除后重新排序號(hào)
 for (let i = 0; i < $(".num").length; i++) {
 $(".num")[i].innerHTML = i + 1;
 }
 //全都刪除時(shí)清空table(通過(guò)獲取tbody的高度來(lái)判斷)
 let clear = $("tbody").height();
 if (clear == 50) {
 $("table").remove();
 $(".empty").css({ //刪完時(shí)顯示"購(gòu)物車(chē)為空"這個(gè)盒子
 display: "block"
 });
 }
 });
 });
 //合計(jì)
 function total() {
 let sum = 0;
 $(".prices").each(function () {//先循環(huán)每個(gè)小計(jì)
 if (($(this).parents("tr").find(".check")).prop("checked")) {//判斷復(fù)選框有沒(méi)有選中
 sum += parseFloat($(this).html());
 }
 $(".pricetal").html(sum);
 });
 }
 //總數(shù)量
 function countAll() {
 let counts = 0;
 for(let i=0;i<$(".check").length;i++){
 if($(".check")[i].checked==true){ //注意此塊用jquery不好實(shí)現(xiàn)
 counts+=parseInt( $('.span')[i].innerHTML);
 }
 } 
 $(".goods_num")[0].innerHTML=counts;
 }
 //最貴商品比較
 function compare() {
 let temp = 0;
 for (let i = 0; i < $(".price").length; i++) { //循環(huán)單價(jià)
 if($(".check")[i].checked==true){
 var temps = parseFloat($(".price")[i].innerHTML);
 if (temps > temp) {
 temp = temps;
 }
 }
 };
 $(".pricest").html(temp);
 }
 //全選插件(引入插件Allcheck.js)
 $(".checkOnly").bindCheck($("#table :checkbox"));
 //當(dāng)點(diǎn)擊復(fù)選框時(shí)調(diào)用total()
 $(".check").each(function (){
 $(this).click(function () {
 let num = 0;
 $(".check").each(function () {
 if ($(this).prop("checked")) {
 num++; 
 }
 countAll(); 
 total();
 compare(); //最貴的
 });
 if(num == $(".check").length){//如果復(fù)選框的長(zhǎng)度與num相等時(shí)，全選那個(gè)按鈕也會(huì)被選中
 $(".checkOnly")[0].checked = true;
 compare(); //最貴的
 countAll(); //總數(shù)量
 total();
 }else{
 $(".checkOnly")[0].checked = false;
 }
 });
 });
 $(".checkOnly").click(function () {
 total();
 countAll(); //總數(shù)量
 compare(); //最貴的
 });
 });
</script>

補(bǔ)充上面js代碼中用到的全選反選插件 \color{red}{補(bǔ)充上面js代碼中用到的全選反選插件}補(bǔ)充上面js代碼中用到的全選反選插件

//1、定義全選的插件
jQuery.fn.extend({
 bindCheck:function($subCheckBox,$btnUncheck){
 let $allCheckBox = this;
 //1、給全選復(fù)選框綁定click事件
 //this:是全選復(fù)選框（jQuery對(duì)象）
 this.click(function(){
 let isChecked = this.checked;
 $subCheckBox.each(function(){
 this.checked = isChecked;
 });
 });
 //2、給反選
 if(arguments.length==2){
 $btnUncheck.click(function(){
 $subCheckBox.each(function(){
 this.checked = !this.checked;
 });
 reversCheck();
 });
 }
 //3、給每個(gè)選擇項(xiàng)的復(fù)選框綁定事件
 $subCheckBox.click(function(){
 reversCheck();
 });
 function reversCheck(){
 //1、判斷是否全部的復(fù)選框被選中
 let isAllChecked = true;
 $subCheckBox.each(function(){
 if(!this.checked){
 isAllChecked = false;
 }
 });
 //2、處理全選復(fù)選框
 $allCheckBox.attr("checked",isAllChecked);
 }
 }
});

效果如下圖所示：