jquery购物车前端实现

最新推荐文章于 2024-05-16 22:04:43 发布

前端-夜之月

最新推荐文章于 2024-05-16 22:04:43 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/qq_39092933/article/details/98489077

版权

这个主要是把购物车一些功能实现，样式没有怎么写，商品名，图片什么的也没写
jquery路径自己改一下

<!DOCTYPE html>
<html>
 <head>
	<meta charset="utf-8">
	<title></title>
	<script src="js/jquery/2.0.0/jquery.min.js"></script>
	<style type="text/css">
		div.total{
			color: red;
			font-size: 18px;
			font-weight: bold;
			display: inline-block;
		}
	</style>
</head>

<body>
	<table border="1" cellspacing="0" cellpadding="0">
		<thead>
			<tr>
				<th><input class="allinput" type="checkbox" name="" id="" value="" /></th>
				<th>价格（￥）</th>
				<th>数量</th>
				<th>小计（￥）</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input class="cinput" type="checkbox"  name="" mid="1" value="" /></td>
				<td><span class="price" mid="1">30</span></td>
				<td>
					<button class="reduce" type="button" mid="1">-</button><input class="count" id="" value="1" mid="1"/><button class="add" type="button" mid="1">+</button>
				</td>
				<td><span class="subtotal" mid="1">30</span></td>
				<td><button class="remove" type="button" mid="1">删除</button></td>
			</tr>
			<tr>
				<td><input class="cinput" type="checkbox"  name="" mid="2" value="" /></td>
				<td><span class="price" mid="2">56</span></td>
				<td>
					<button class="reduce" type="button" mid="2">-</button><input class="count" id="" value="1" mid="2"/><button class="add" type="button" mid="2">+</button>
				</td>
				<td><span class="subtotal" mid="2">56</span></td>
				<td><button class="remove" type="button" mid="2">删除</button></td>
			</tr>
			<tr>
				<td><input class="cinput" type="checkbox"  name="" mid="3" value="" /></td>
				<td><span class="price" mid="3">98</span></td>
				<td>
					<button class="reduce" type="button" mid="3">-</button><input class="count" id="" value="1" mid="3"/><button class="add" type="button" mid="3">+</button>
				</td>
				<td><span class="subtotal" mid="3">98</span></td>
				<td><button class="remove" type="button" mid="3">删除</button></td>
			</tr>
		</tbody>
	</table>

	
	合计（￥）：<div class="total">0</div>
</body>
<script type="text/javascript">
	$(function(){
		
		/* 减少数量 */
		$("button.reduce").click(function(){
			var mid=$(this).attr("mid");
			var count=parseInt($("input.count[mid="+mid+"]").val());
			var price=parseInt($("span.price[mid="+mid+"]").html());
			var subtotal=0;
			
			var checked=$("input.cinput[mid="+mid+"]").prop("checked");

			
			if(count>0){
				count-=1;
				$("input.count[mid="+mid+"]").val(count);
				subtotal=count*price;
				$("span.subtotal[mid="+mid+"]").html(subtotal);
			}
			
			if(checked){
				total();
			}
		})
		
		/*  增加数量  */
		$("button.add").click(function(){
			var mid=$(this).attr("mid");
			var count=parseInt($("input.count[mid="+mid+"]").val());
			var price=parseInt($("span.price[mid="+mid+"]").html());
			var subtotal=0;
			
			var checked=$("input.cinput[mid="+mid+"]").prop("checked");
			
			if(count>=0){
				count+=1;
				$("input.count[mid="+mid+"]").val(count);
				subtotal=count*price;
				$("span.subtotal[mid="+mid+"]").html(subtotal);
			}
			
			if(checked){
				total();
			}
		})
		
		/* 合计 */
		function total(){
			var total=0;
			$("input.cinput").each(function(){
				var checked=$(this).prop("checked");
				var mid=$(this).attr("mid");
				var subtotal=parseInt($("span.subtotal[mid="+mid+"]").html());
				if(checked){
					total+=subtotal;
				}
			})
			$("div.total").html(total);
		}
		/* 点击多选框 */
		$("input.cinput").click(function(){
			total();
			var i=0;
			$("input.cinput").each(function(){
				var checked=$(this).prop("checked");
				if(!checked){
					i+=1;
				}
			})
			if(i==0){
				$("input.allinput").prop("checked","checked");
			}else{
				$("input.allinput").prop("checked",false);
			}
			
		})
		
		/* 点击全选 */
		$("input.allinput").click(function(){
			var allchecked=$(this).prop("checked");
			if(allchecked){
				$("input.cinput").prop("checked","checked");
				total();
			}else{
				$("input.cinput").prop("checked",false);
				$("div.total").html(0);
			}
			
		})
		
		/* 删除是根据父元素的父元素实现的，删除button的父元素的父元素是tr, */
		$("button.remove").click(function(){
			
			$(this).parent().parent().remove();/* 把tr删除 */
		})
	})
</script>