正文
jQuery实现简单购物车页面
小程序：扫一扫查出行【扫一扫了解最新限行尾号】
复制小程序
功能描述：
当全选按钮被按下时，所有商品的小复选框（以及另外一个全选按钮）的选中状态跟按下的全选按钮保持一致；
当用户选中商品时，如果所有商品都被选中，就让全选按钮为选中状态；
用户可以点击 + - 增加或减少商品数量，也可以直接在文本框修改数量，数量修改后 后边的小计也会相应改变；
用户可以进行删除操作，删除单个商品、选中商品以及清理购物车；
当用户进行操作时，下面的已选商品件数以及总额也会有相应变化
准备工作：
首先将css样式以及jq、js文件引入，jq文件要放在js文件上边
<link rel="stylesheet" href="css/car.css">
<script src="js/jquery.min.js"></script>
<script src="js/car.js"></script>
HTML代码及CSS样式：
<body>
<div class="w">
<div class="cart-warp">
<!-- 头部全选模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<div class="t-action">操作</div>
</div>
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥12.60</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/p2.jpg" alt="">
</div>
<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="img/p3.jpg" alt="">
</div>
<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价： <em>￥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div> <!-- cart-floatbar end -->
</div> <!-- cart-warp end -->
</div> <!-- w end -->
</body>
car.html
* {
margin:;
padding: 0
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
body {
font: 12px/1.5 'Microsoft YaHei', 'Heiti SC', tahoma, arial, 'Hiragino Sans GB', \\5B8B\4F53, sans-serif;
color: #666
}
.w {
width: 1200px;
margin: 0 auto;
}
.cart-thead {
height: 32px;
line-height: 32px;
margin: 5px 0 10px;
padding: 5px 0;
background: #f3f3f3;
border: 1px solid #e9e9e9;
border-top:;
position: relative;
}
.cart-thead>div,
.cart-item>div {
float: left;
}
.t-checkbox,
.p-checkbox {
height: 18px;
line-height: 18px;
padding-top: 7px;
width: 122px;
padding-left: 11px;
}
.t-goods {
width: 400px;
}
.t-price {
width: 120px;
padding-right: 40px;
text-align: right;
}
.t-num {
width: 150px;
text-align: center;
}
.t-sum {
width: 100px;
text-align: right;
}
.t-action {
width: 130px;
text-align: right;
}
.cart-item {
height: 160px;
border-style: solid;
border-width: 2px 1px 1px;
border-color: #aaa #f1f1f1 #f1f1f1;
background: #fff;
padding-top: 14px;
margin: 15px 0;
}
.check-cart-item {
background: #fff4e8;
}
.p-checkbox {
width: 50px;
}
.p-goods {
margin-top: 8px;
width: 565px;
}
.p-img {
float: left;
border: 1px solid #ccc;
padding: 5px;
}
.p-msg {
float: left;
width: 210px;
margin: 0 10px;
}
.p-price {
width: 110px;
}
.quantity-form {
width: 80px;
height: 22px;
}
.p-num {
width: 170px;
}
.decrement,
.increment {
float: left;
border: 1px solid #cacbcb;
height: 18px;
line-height: 18px;
padding: 1px 0;
width: 16px;
text-align: center;
color: #666;
background: #fff;
margin-left: -1px;
}
.itxt {
float: left;
border: 1px solid #cacbcb;
width: 42px;
height: 18px;
line-height: 18px;
text-align: center;
padding: 1px;
margin-left: -1px;
font-size: 12px;
font-family: verdana;
color: #333;
-webkit-appearance: none;
}
.p-sum {
font-weight:;
width: 145px;
}
.cart-floatbar {
height: 50px;
border: 1px solid #f0f0f0;
background: #fff;
position: relative;
margin-bottom: 50px;
line-height: 50px;
}
.select-all {
float: left;
height: 18px;
line-height: 18px;
padding: 16px 0 16px 9px;
white-space: nowrap;
}
.select-all input {
vertical-align: middle;
display: inline-block;
margin-right: 5px;
}
.operation {
float: left;
width: 200px;
margin-left: 40px;
}
.clear-all {
font-weight:;
margin: 0 20px;
}
.toolbar-right {
float: right;
}
.amount-sum {
float: left;
}
.amount-sum em {
font-weight:;
color: #E2231A;
padding: 0 3px;
}
.price-sum {
float: left;
margin: 0 15px;
}
.price-sum em {
font-size: 16px;
color: #E2231A;
font-weight:;
}
.btn-area {
font-weight:;
width: 94px;
height: 52px;
line-height: 52px;
color: #fff;
text-align: center;
font-size: 18px;
font-family: "Microsoft YaHei";
background: #e54346;
overflow: hidden;
}
car.css
具体功能实现：
1. 当全选按钮改变时，让小复选框按钮和全选按钮保持一致。
全选按钮被选中时，让所有商品背景色改变，反之则去掉背景色，同时也要改变已选商品件数和总额
$(".checkall").change(function() {
// 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
getSum(); // 计算总额函数
// 添加背景
// 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
if($(this).prop("checked")) {
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
})
2. 当小复选框按钮改变时，判断是否所有的小按钮都是选中状态，是的话让全选按钮为选中状态，否则为未选中状态。
通过已选复选框的个数是否等于所有小复选框的总个数来判断，同时也要改变背景色和总额模块
$(".j-checkbox").change(function() {
if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
getSum();
// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
if($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
})
3. 用户可以通过点击加减号或者直接修改文本框来修改商品数量，后边的小计也做相应的变化
①点击+按钮，文本框数字加一，小计加价。
先把原来的数量获取过来，然后在原来的基础上加一再赋给文本框；把单价获取过来，乘以文本框数量就是小计
$(".increment").click(function() {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 小计模块
// num为获取过来的单价，用substr()截取字符串把前边的￥去掉
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
②点击-按钮，文本框数字减一，小计减价。
具体方法同上，有一点不一样是商品数量不能小于1，要判断一下
$(".decrement").click(function() {
var n = $(this).siblings(".itxt").val();
n <= 1 ? n : n--;
$(this).siblings(".itxt").val(n);
// 小计模块
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
③直接修改文本框改变数量
$(".itxt").change(function() {
var n = $(this).val();
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
4. 计算已选商品数及总额。封装成一个函数，页面加载完时应先调用一下，更新数据
声明变量来存储已选商品数以及总额，用each()遍历已选商品。
function getSum() {
var count = 0;
var money = 0;
// 只遍历选中的商品 each遍历，i为索引，ele为对象
$(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
count += parseInt($(ele).val()); // 会有小误差，要取整一下
})
$(".amount-sum em").text(count);
$(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
})
$(".price-sum em").text("￥" + money.toFixed(2));
}
5. 删除模块
// 删除单个商品
$(".p-action a").click(function() {
$(this).parents(".cart-item").remove();
getSum();
})
// 删除选中商品
$(".remove-batch").click(function() {
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
})
// 清理购物车
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
})
完整JS代码：
$(function() {
$(".checkall").change(function() {
// 当全选按钮改变时，让小复选框按钮和全选按钮保持一致（隐式迭代，不需要循环遍历）
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
getSum(); // 计算总额函数
// 添加背景
// 判断是否是选中状态，是的话添加check-cart-item类，没有就移除
if($(this).prop("checked")) {
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
})
$(".j-checkbox").change(function() {
if($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
getSum();
// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
if($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
}) // 点击+按钮，文本框数字加一
$(".increment").click(function() {
var n = $(this).siblings(".itxt").val();
n++;
$(this).siblings(".itxt").val(n);
// 小计模块
// num为获取过来的单价，用substr()截取字符串把前边的￥去掉
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
// 点击-按钮，文本框数字减一
$(".decrement").click(function() {
var n = $(this).siblings(".itxt").val();
n <= 1 ? n : n--;
$(this).siblings(".itxt").val(n);
// 小计模块
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
})
// 当用户直接修改文本框时
$(".itxt").change(function() {
var n = $(this).val();
var num = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
// toFixed(2)保留两位小数
var price = (num * n).toFixed(2);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + price);
getSum();
}) // 计算总额函数
getSum();
function getSum() {
var count = 0;
var money = 0;
// 只遍历选中的商品 each遍历，i为索引，ele为对象
$(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
count += parseInt($(ele).val()); // 会有小误差，要取整一下
})
$(".amount-sum em").text(count);
$(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
money += parseFloat($(ele).text().substr(1));
})
$(".price-sum em").text("￥" + money.toFixed(2));
} // 删除商品模块
// 删除单个商品
$(".p-action a").click(function() {
$(this).parents(".cart-item").remove();
getSum();
})
// 删除选中商品
$(".remove-batch").click(function() {
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
})
// 清理购物车
$(".clear-all").click(function() {
$(".cart-item").remove();
getSum();
})
})
