jQuery实现购物车完整功能，script+css完整代码+详细解释，可复制粘贴使用，更改图片及相关数据即可
这是一个使用 jQuery 实现的一个购物车功能的 JavaScript 脚本。
- 在文档加载完成后，通过
$()函数获取页面元素并绑定事件处理函数。 - 当全选复选框
.checkAll的状态改变时，将所有商品项的复选框状态设置为与全选复选框相同，并根据全选复选框的状态修改整个购物车的背景样式。 - 当商品项的复选框
.checkItem状态改变时，根据选中的商品项数量修改全选复选框的状态，并修改对应商品项的背景样式。 - 点击增加按钮
.add时，将该商品的购买数量加一，并根据新的购买数量计算并更新该商品的总金额，并调用getSum()函数计算整个购物车的总金额。 - 点击减少按钮
.substract时，将该商品的购买数量减一（如果数量已经为1，则不执行操作），并根据新的购买数量计算并更新该商品的总金额，并调用getSum()函数计算整个购物车的总金额。 - 当手动输入购买数量时，将输入的值向上取整，并根据新的购买数量计算并更新该商品的总金额，并调用
getSum()函数计算整个购物车的总金额。 -
getSum()函数用于计算购物车的总件数和总金额。它遍历所有商品项的购买数量，并将数量累加到count中，然后遍历所有商品项的总金额，并将金额累加到money中，最后更新页面上显示总件数和总金额的元素。 - 点击删除按钮
.del时，移除该商品项，并调用getSum()函数计算整个购物车的总金额。 - 点击删除选中商品按钮
.del_choice时，移除所有选中的商品项，并调用getSum()函数计算整个购物车的总金额。 - 点击清空购物车按钮
.delAll时，移除所有商品项，并调用getSum()函数计算整个购物车的总金额。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../JSFile/jQuery.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.bg{
background-color: aqua;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
.commodity {
width: 1400px;
margin-top: 50px;
}
.commodity .head {
display: flex;
justify-content: space-between;
align-items: center;
background-color: lightgray;
height: 50px;
}
.commodity .head>div {
display: flex;
}
.commodity .head .right {
width: 700px;
text-align: center;
}
.commodity .head .left>div,
.commodity .head .right>div {
flex: 1;
}
.commodity .head .left {
width: 300px;
margin-left: 10px;
}
.commodity img {
width: 150px;
display: block;
padding: 10px;
border: 1px solid lightgray;
border-radius: 5px;
}
.commodity .main {
display: flex;
justify-content: space-between;
box-sizing: border-box;
padding-top: 20px;
/* background-color: aqua; */
height: 250px;
margin-top: 20px;
border-top: 4px solid #666666;
}
.commodity .main .left {
display: flex;
align-items: start;
width: 550px;
justify-content: space-between;
}
.commodity .main .left>div {
margin-left: 10px;
}
.commodity .main .left .product {
display: flex;
margin-left: 50px;
}
.commodity .main .product p {
margin-left: 20px;
}
.commodity .main .right {
display: flex;
width: 700px;
}
.commodity .main .right>div {
flex: 1;
display: flex;
justify-content: center;
}
.commodity .main .right .count {
display: flex;
height: 30px;
font-size: 16px;
margin-top: -5px;
}
.commodity .main .right button {
width: 20px;
border: none;
border: 1px solid black;
background-color: white;
cursor: pointer;
font-size: 16px;
}
.commodity .main .right input {
width: 60px;
text-align: center;
outline: none;
border: none;
border-top: 1px solid black;
border-bottom: 1px solid black;
}
.commodity .main .right .del,
.commodity .foot .left .del_choice,
.commodity .foot .left .delAll
{
cursor: pointer;
}
.commodity .foot {
font-size: 14px;
background-color: #b0abab;
margin-top: 10px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.commodity .foot span {
color: red;
}
.commodity .foot button {
background-color: red;
color: white;
border: none;
border: 1px solid red;
height: 40px;
width: 60px;
font-weight: bold;
}
.commodity .foot>div {
display: flex;
}
.commodity .foot .left {
margin-left: 10px;
}
.commodity .foot .right {
align-items: center;
}
.commodity .foot .right>div,
.commodity .foot .left>div {
margin-right: 20px;
}
.end {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="commodity">
<div class="head">
<div class="left">
<div>
<input type="checkbox" class="checkAll">全选
</div>
<div>商品</div>
</div>
<div class="right">
<div>单价</div>
<div>数量</div>
<div>小计</div>
<div>操作</div>
</div>
</div>
<div class="main">
<div class="left">
<div>
<input type="checkbox" class="checkItem">
</div>
<div class="product">
<img src="../images/jd_2.webp" alt="">
<p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
</div>
</div>
<div class="right">
<div class="price">￥12.60</div>
<div class="count">
<button class="substract">-</button>
<input type="text" class="num" value="1"></input>
<button class="add">+</button>
</div>
<div class="sum">￥12.60</div>
<div class="del">删除</div>
</div>
</div>
<div class="main">
<div class="left">
<div>
<input type="checkbox" class="checkItem">
</div>
<div class="product">
<img src="../images/jd_3.webp" alt="">
<p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
</div>
</div>
<div class="right">
<div class="price">￥25.60</div>
<div class="count">
<button class="substract">-</button>
<input type="text" class="num" value="1"></input>
<button class="add">+</button>
</div>
<div class="sum">￥25.60</div>
<div class="del">删除</div>
</div>
</div>
<div class="main">
<div class="left">
<div>
<input type="checkbox" class="checkItem">
</div>
<div class="product">
<img src="../images/jd_4.webp" alt="">
<p>[5本268元]经典儿童文学彩图青少版八十天环游地球中学生语文数学大纲</p>
</div>
</div>
<div class="right">
<div class="price">￥18.60</div>
<div class="count">
<button class="substract">-</button>
<input type="text" class="num" value="1"></input>
<button class="add">+</button>
</div>
<div class="sum">￥18.60</div>
<div class="del">删除</div>
</div>
</div>
<div class="foot">
<div class="left">
<div>
<input type="checkbox" class="checkAll">全选
</div>
<div class="del_choice">删除选中的商品</div>
<div class="delAll">清空购物车</div>
</div>
<div class="right">
<div>已经选<span class="sumNum">1</span>件商品</div>
<div>总价：<span class="sumP">￥12.60</span></div>
<button class="result">去结算</button>
</div>
</div>
<div class="end"></div>
</div>
<script>
$(function(){
$('.checkAll').change(function(){
var changeChecked=$(this).prop('checked')
$('.checkItem,.checkAll').prop('checked',changeChecked)
if($(this).prop('checked')){
$('.main').addClass('bg')
}else{
$('.main').removeClass('bg')
}
})
$('.checkItem').change(function(){
if($(this).prop('checked')){
$(this).parents('.main').addClass('bg')
}else{
$(this).parents('.main').removeClass('bg')
}
if($('.checkItem:checked').length==3){
$('.checkAll').prop('checked',true)
}else{
$('.checkAll').prop('checked',false)
}
})
// 增加购买数
$('.add').click(function(){
var n = $(this).siblings('.num').val()
n++
$(this).siblings('.num').val(n)
var sum=$(this).parent().siblings('.sum')
var pri=sum.siblings('.price').text()
var p=pri.substr(1)
var sumPri=(p*n).toFixed(2)
sum.text('￥'+sumPri)
getSum()
})
// 减少购买数
$('.substract').click(function(){
var n = $(this).siblings('.num').val()
if(n==1){
return false
}
n--
$(this).siblings('.num').val(n)
var sum=$(this).parent().siblings('.sum')
var pri=sum.siblings('.price').text()
var p=pri.substr(1)
var sumPri=(p*n).toFixed(2)/* toFixed(2)保留两位小数 */
sum.text('￥'+sumPri)
getSum()
})
// 手动输入购买数量
$('.num').change(function(){
// 输入值为非整数，向上取整
var n=Math.ceil($(this).val())
var sum=$(this).parent().siblings('.sum')
var pri=sum.siblings('.price').text()
var p=pri.substr(1)
var sumPri=(p*n).toFixed(2)
sum.text('￥'+sumPri)
$(this).val(n)
})
getSum()
function getSum(){
var count=0 /* 计算总件数 */
var money=0 /* 计算总价钱 */
$('.num').each(function(i,ele){
count+=parseInt($(ele).val())
})
$('.sumNum').text(count)
$('.sum').each(function(i,ele){
money+=parseFloat($(ele).text().substr(1))
})
$('.sumP').text('￥'+money.toFixed(2))
}
// 删除商品
$('.del').click(function(){
$(this).parents('.main').remove()
getSum()
})
// 删除选中的商品
$('.del_choice').click(function(){
$('.checkItem:checked').parents('.main').remove()
getSum()
})
// 清空购物车
$('.delAll').click(function(){
$('.main').remove()
getSum()
})
})
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
