Jquery仿淘寶購物車
首先看效果圖，點擊全選按鈕，全部帶條目的複選框按鈕都會隨之變化，觀察結算按鈕的顏色變化。帶條目的複選框按鈕沒有被所有選中時，全選按鈕也不會被選中。
javascript
$(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>