Jquery仿淘宝购物车

最新推荐文章于 2021-11-06 11:09:47 发布

sz_gaochao

最新推荐文章于 2021-11-06 11:09:47 发布

阅读量2.9k

点赞数

分类专栏： jsp 文章标签： jsp jquery 购物车

本文链接：https://blog.csdn.net/u010001192/article/details/45440555

版权

jsp 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

首先看效果图，点击全选按钮，所有带条目的复选框按钮都会随之变化，观察结算按钮的颜色变化。带条目的复选框按钮没有被全部选中时，全选按钮也不会被选中。

$(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>

sz_gaochao

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
Jquery仿淘宝购物车

首先看效果图，点击全选按钮，所有带条目的复选框按钮都会随之变化，观察结算按钮的颜色变化。带条目的复选框按钮没有被全部选中时，全选按钮也不会被选中。$(function() { showTotal();//计算总计 /* 给全选添加click事件 */ $("#selectAll").click(function() { /* 1. 获取全选的状态
复制链接

扫一扫