Jquery仿淘寶購物車
阿新 • • 發佈:2019-02-02
首先看效果圖,點選全選按鈕,所有帶條目的複選框按鈕都會隨之變化,觀察結算按鈕的顏色變化。帶條目的複選框按鈕沒有被全部選中時,全選按鈕也不會被選中。
$(function() { showTotal();//計算總計 /* 給全選新增click事件 */ $("#selectAll").click(function() { /* 1. 獲取全選的狀態 */ var bool = $("#selectAll").attr("checked"); /* 2. 讓所有條目的複選框與全選的狀態同步 */ setItemCheckBox(bool); /* 3. 讓結算按鈕與全選同步 */ setJieSuan(bool); /* 4. 重新計算總計 */ showTotal(); }); /* 給所有條目的複選框新增click事件 */ $(":checkbox[name=checkboxBtn]").click(function() { var all = $(":checkbox[name=checkboxBtn]").length;//所有條目的個數 var select = $(":checkbox[name=checkboxBtn][checked=true]").length;//獲取所有被選擇條目的個數 if(all == select) {//全都選中了 $("#selectAll").attr("checked", true);//勾選全選複選框 setJieSuan(true);//讓結算按鈕有效 } else if(select == 0) {//誰都沒有選中 $("#selectAll").attr("checked", false);//取消全選 setJieSuan(false);//讓結算失效 } else { $("#selectAll").attr("checked", false);//取消全選 setJieSuan(true);//讓結算有效 } showTotal();//重新計算總計 }); }); /* * 計算總計 */ function showTotal() { var total = 0; /* 1. 獲取所有的被勾選的條目複選框!迴圈遍歷之 */ $(":checkbox[name=checkboxBtn][checked=true]").each(function() { //2. 獲取複選框的值,即其他元素的字首 var id = $(this).val(); //3. 再通過字首找到小計元素,獲取其文字 var text = $("#" + id + "Subtotal").text(); //4. 累加計算 total += Number(text); }); // 5. 把總計顯示在總計元素上 $("#total").text(total); } /* * 統一設定所有條目的複選按鈕 */ function setItemCheckBox(bool) { $(":checkbox[name=checkboxBtn]").attr("checked", bool); } /* * 設定結算按鈕樣式 */ function setJieSuan(bool) { if(bool) { $("#jiesuan").removeClass("kill").addClass("jiesuan"); $("#jiesuan").unbind("click");//撤消當前元素止所有click事件 } else { $("#jiesuan").removeClass("jiesuan").addClass("kill"); $("#jiesuan").click(function() {return false;}); } } </script> </head> <body> <table width="95%" align="center" cellpadding="0" cellspacing="0"> <tr> <td align="right"> <img align="top" src="<c:url value='/images/icon_empty.png'/>"/> </td> <td> <span class="spanEmpty">您的購物車中暫時沒有商品</span> </td> </tr> </table> <br/> <br/> <table width="95%" align="center" cellpadding="0" cellspacing="0"> <tr align="center" bgcolor="#efeae5"> <td align="left" width="50px"> <input type="checkbox" id="selectAll" checked="checked"/><label for="selectAll">全選</label> </td> <td colspan="2">商品名稱</td> <td>單價</td> <td>數量</td> <td>小計</td> <td>操作</td> </tr> <c:forEach items="${cartItemList }" var="cartItem"> <tr align="center"> <td align="left"> <input value="${cartItem.cartItemId }" type="checkbox" name="checkboxBtn" checked="checked"/> </td> <td align="left" width="70px"> <a class="linkImage" href="<c:url value='/jsps/book/desc.jsp'/>"><img border="0" width="54" align="top" src="<c:url value='/${cartItem.book.image_b }'/>"/></a> </td> <td align="left" width="400px"> <a href="<c:url value='/jsps/book/desc.jsp'/>"><span>${cartItem.book.bname }</span></a> </td> <td><span>¥<span class="currPrice">${cartItem.book.currPrice }</span></span></td> <td> <a class="jian" id="${cartItem.cartItemId }Jian"></a><input class="quantity" readonly="readonly" id="${cartItem.cartItemId }Quantity" type="text" value="${cartItem.quantity }"/><a class="jia" id="${cartItem.cartItemId }Jia"></a> </td> <td width="100px"> <span class="price_n">¥<span class="subTotal" id="${cartItem.cartItemId }Subtotal">${cartItem.subtotal }</span></span> </td> <td> <a href="<c:url value='/jsps/cart/list.jsp'/>">刪除</a> </td> </tr> </c:forEach> <tr> <td colspan="4" class="tdBatchDelete"> <a href="javascript:alert('批量刪除成功');">批量刪除</a> </td> <td colspan="3" align="right" class="tdTotal"> <span>總計:</span><span class="price_t">¥<span id="total"></span></span> </td> </tr> <tr> <td colspan="7" align="right"> <a href="<c:url value='/jsps/cart/showitem.jsp'/>" id="jiesuan" class="jiesuan"></a> </td> </tr> </table>