原生js实现购物车的加减与全选，反选功能

最新推荐文章于 2023-02-06 18:56:28 发布

慢慢の成长

最新推荐文章于 2023-02-06 18:56:28 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：原生js购物车文章标签：购物车全选反选 js原生

本文链接：https://blog.youkuaiyun.com/weixin_44537264/article/details/88104434

该博客详细介绍了如何利用JavaScript原生代码实现购物车中商品数量的增加和减少，以及全选和反选功能。通过HTML布局、JS逻辑和CSS样式，博主展示了完整的实现过程，并提供了代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果请看底部图片

html代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
	</head>

	<body>

		<div id="wrap">
			<h4><span>全部商品</span></h4>

			<div class="car-title">
				<span>选择</span>
				<span>商品信息</span>
				<span>单价</span>
				<span>数量</span>
				<span>金额</span>
				<span>操作</span>
			</div>

			<ul class="car-cont" id="car-cont">
				<li>
					<p>
						<label class="checkBtn checked"></label>
					</p>
					<p>
						<img src="img/1.jpg" alt="" />
						<span class="productTitle">Casio/卡西欧 EX-TR350</span>
					</p>
					<p>
						<span class="cost">580</span>
					</p>
					<p class="count">
						<span class="reduce">-</span>
						<input class="count-input" type="text" value="1" />
						<span class="add">+</span>
					</p>
					<p>
						<span class="oneCost"></span>
					</p>
					<p>
						<em class="deletBtn">删除</em>
					</p>
				</li>
				<li>
					<p>
						<label class="checkBtn checked"></label>
					</p>
					<p>
						<img src="img/6.jpg" alt="" />
						<span class="productTitle">Canon/佳能 PowerShot SX50 HS</span>
					</p>
					<p>
						<span class="cost">380</span>
					</p>
					<p class="count">
						<span class="reduce">-</span>
						<input class="count-input" type="text" value="1" />
						<span class="add">+</span>
					</p>
					<p>
						<span class="oneCost"></span>
					</p>
					<p>
						<em class="deletBtn">删除