购物车需求：
1、 当全选选中时，所有商品的小复选框的选中状态跟按下的全选按钮保持一致；
2、 当选中商品时，添加背景颜色；如果所有商品都被选中，就让全选按钮为选中状态；
3、 可以点击 +或 - 来增加或减少商品数量，也可以直接在文本框修改数量，数量修改之后的小计也会相应改变；
4、 可以进行删除单个商品、和选中商品以及清空购物车；
5、 进行操作时，下面的已选商品件数以及总额也会有相应变化；
默认：
全选和改变数量效果
删除选中的商品
删除之后的效果
JS代码：
$(function() {
//1.保留小数点
function saveDecimal(num, count) {
return num.toFixed(count);
}
//2.获得总计
function getTotal() {
//总计数
var count = 0;
//总金额
var sum = 0;
//原来单选按钮-输入文本-itxt
$(".j-checkbox:checked").parents(".cart-item").find(".itxt").each(function(i, ele) {
//累计
count += parseInt($(ele).val());
})
//单选按钮->小计p-sum
$(".j-checkbox:checked").parents(".cart-item").find(".p-sum").each(function(i, ele) {
//累计
sum += parseFloat($(ele).html().substr(1));
})
//赋值
$(".amount-sum em").html(count);
$(".price-sum em").html("￥" + saveDecimal(sum, 2));
}
//3.单击"+"(当前对象)
$(".increment").click(function() {
//1)获得文本值上一个
var quantity = $(this).prev(".itxt").val();
//2)累加
quantity++;
//重新赋值
$(this).prev(".itxt").val(quantity)
//3)获得价格,进行截取后面的值；
var price = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
//4）计算小计
var sum = quantity * price;
//5)赋值到小计中
$(this).parents(".p-num").siblings(".p-sum").html("￥" + saveDecimal(sum, 2));
//6）计算总个
getTotal();
});
//4.单击"-"(当前对象)
$(".decrement").click(function() {
//1)获得文本值下一个
var quantity = $(this).next(".itxt").val();
//2)减减 (只能是1)
(quantity <= 1) ? (quantity) : (quantity--);
//重新赋值
$(this).next(".itxt").val(quantity)
//3)获得价格,进行截取后面的值；
var price = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
//4）计算小计
var sum = quantity * price;
//5)赋值到小计中
$(this).parents(".p-num").siblings(".p-sum").html("￥" + saveDecimal(sum, 2));
//6）计算总个
getTotal();
});
//全选
$(".checkall").change(function() {
//如果全选选中，那么就下面多个复选框跟着被选中
$(".checkall, .j-checkbox").prop("checked", $(this).prop("checked"));
//计算总个
getTotal();
//判断全选选中，那么就添加背景
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").attr("checked", true);
} else {
$(".checkall").attr("checked", false);
}
//累计和
getTotal();
// 当小复选框为选中状态时，改变背景颜色（添加check-cart-item类）
//注意：对属性Property可以赋任何类型的值，而对特性Attribute只能赋值字符串！
console.log($(this).attr("checked"))
if($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
$(this).parents(".cart-item").removeClass("check-cart-item");
}
});
// 当用户直接修改文本框时
$(".itxt").change(function() {
//1)数量
var quantity = $(this).val();
//2)判断验证
if(quantity <= 0) {
alert("数量不为零或负数");
$(this).val(1);
return;
}
//3)价格
var price = $(this).parents(".p-num").siblings(".p-price").html().substr(1);
//4）计算小计
var sum = quantity * price;
//5)赋值到小计中
$(this).parents(".p-num").siblings(".p-sum").html("￥" + saveDecimal(sum, 2));
//6）计算总个
getTotal();
});
//删除单个商品
$(".p-action").click(function() {
//判断
if(confirm("您确定要删除吗？")) {
$(this).parents(".cart-item").remove();
}
//6）计算总个
getTotal();
});
//删除选中的商品(选中)
$(".remove-batch").click(function() {
//判断
if(confirm("您确定要删除吗？")) {
$(".j-checkbox:checked").parents(".cart-item").remove();
}
//6）计算总个
getTotal();
});
//清理购物车(所有)
$(".clear-all").click(function(){
//判断
if(confirm("您确定要清空吗？")) {
$(".cart-item").remove();
}
//6）计算总个
getTotal();
})
});CSS样式
* {
margin: 0;
padding: 0
}
em,
i {
font-style: normal;
}
li {
list-style: none;
}
a {
color: #666;
text-decoration: none;
}
a:hover {
color: #e33333;
}
body {
font: 14px/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: papayawhip;
border: 1px solid #e9e9e9;
border-top: 0;
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;
font-weight: bolder;
}
.t-price {
width: 120px;
padding-right: 40px;
text-align: right;
font-weight: bolder;
}
.t-num {
width: 150px;
text-align: center;
font-weight: bolder;
}
.t-sum {
width: 100px;
text-align: right;
font-weight: bolder;
}
.t-action {
width: 130px;
text-align: right;
font-weight: bolder;
}
/*每一个小块div*/
.cart-item {
height: 120px;
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: azure;
}
.p-checkbox {
width: 50px;
}
.p-goods {
margin-top: 8px;
width: 565px;
}
/*图片*/
img{
width: 100px;
height: 90px;
}
.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: 700;
width: 145px;
}
/*购物清算*/
.cart-floatbar {
height: 50px;
border: 1px solid #f0f0f0;
background: #fff;
position: relative;
margin-bottom: 50px;
line-height: 50px;
background: papayawhip;
}
.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: 300px;
margin-left: 30px;
}
.clear-all {
font-weight: 700;
margin: 0 20px;
}
.toolbar-right {
float: right;
}
.amount-sum {
float: left;
}
.amount-sum em {
font-weight: 700;
color: #E2231A;
padding: 0 3px;
}
.price-sum {
float: left;
margin: 0 15px;
}
.price-sum em {
font-size: 16px;
color: #E2231A;
font-weight: 700;
}
.btn-area {
font-weight: 700;
width: 94px;
height: 52px;
line-height: 52px;
color: #fff;
text-align: center;
font-size: 18px;
font-family: "Microsoft YaHei";
background: #e54346;
overflow: hidden;
}HTML页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/car.css"/>
</head>
<script src="js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/my.js" type="text/javascript" charset="utf-8"></script>
<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">￥20.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">￥20.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">￥26.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">￥26.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">￥28.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">￥28.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>￥20.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div> <!-- cart-floatbar end -->
</div> <!-- cart-warp end -->
</div> <!-- w end -->
</body>
</html>本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
