jquery 实现 简单 购物车 商品数量 和 商品的总价 （bootstrap），实现checkbox全选全不选
简单实现了一个购物车 商品 列表，计算 商品 数量 和 商品总价的功能，实现全选全不选。代码完整。
1、css，可根据自己需求清空修改下，列表使用了bootstrap的样式,记得引用下
.page_shop_cart .shop_cart_num {
color: #5271ff;
font-size: 1.125rem;
margin: 1.25rem 0;
}
.page_shop_cart .shop_cart_num span {
padding: 0.3125rem;
border-bottom: 2px solid #5271ff;
}
.page_shop_cart .shop_cart .cart_part_title {
padding: 1.25rem 0;
}
.page_shop_cart .shop_cart .cart_part_title img {
width: 12.5rem;
}
.page_shop_cart .shop_cart .cart_table_head {
background-color: rgba(238, 238, 238, 0.247);
color: #666;
font-size: 14px;
}
.page_shop_cart .shop_cart .cart_table_head tr th {
border-bottom: unset;
}
.page_shop_cart .shop_cart .cart_table_body tr .img_box img {
width: 4.375rem;
height: 4.375rem;
}
.page_shop_cart .shop_cart .cart_table_body tr .img_box span {
margin-top: 0.625rem;
display: block;
color: #666;
font-size: 0.875rem;
height: 1.75rem;
width: 9.375rem;
line-height: 1.375rem;
padding: 0 0.625rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
}
.page_shop_cart .shop_cart .cart_table_body tr .money {
color: red;
}
.page_shop_cart .shop_cart .cart_table_body tr td {
vertical-align: inherit;
color: #666;
font-size: 14px;
}
.page_shop_cart .pay_box {
background-color: #fff4e8;
margin: 1.875rem 0;
}
.page_shop_cart .pay_box .right_check {
margin-left: 0.9375rem;
}
.page_shop_cart .pay_box .right_check input {
cursor: pointer;
}
.page_shop_cart .pay_box .right_check span {
margin-left: 0.625rem;
font-size: 0.875rem;
color: #333;
}
.page_shop_cart .pay_box .pay_right .right_num {
color: #666;
font-size: 0.875rem;
margin-right: 0.625rem;
margin-top: 0.325rem;
}
.page_shop_cart .pay_box .pay_right .right_num .check_num {
color: red;
font-weight: bold;
}
.page_shop_cart .pay_box .pay_right .right_price {
color: #999;
font-size: 0.875rem;
margin-right: 1.25rem;
}
.page_shop_cart .pay_box .pay_right .right_price .total_price {
font-size: 1.25rem;
color: red;
font-weight: bold;
}
.page_shop_cart .pay_box .pay_right .pay_btn {
background-color: #5271ff;
color: #fff;
padding: 0.9375rem 1.875rem;
font-size: 1.125rem;
cursor: pointer;
}
2、HTML页面
<div class="shop_cart container">
<div class="cart_part_title">
<a href="">
<img class="model_img" src="{asset}/img/common/cart_bg.png" class="" alt="">
a>
div>
<div class="shop_cart_num">
<span>全部商品 3span>
div>
<table class="cart_table table table-hover">
<thead class="cart_table_head">
<tr>
<th scope="col">#th>
<th scope="col">应用名称th>
<th scope="col">分类th>
<th scope="col">规格th>
<th scope="col">价格th>
<th scope="col">操作th>
tr>
thead>
<tbody class="cart_table_body">
<tr>
<td>
<input class="check_single" type="checkbox" name="check_single" data-price="99.99">
td>
<td class="img_box d-flex align-items-center">
<a href=""><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1040833709,691101433&fm=11&gp=0.jpg" alt="">a>
<span>giao！span>
td>
<td>giao！giao！giao！giao！td>
<td>giao！giao！giao！giao！td>
<td class="money">
<span>¥ 99.99span>
td>
<td>
<a type="button" class="btn btn-primary btn-sm text-light btn_delete" href="#">删除 a>
td>
tr>
<tr>
<td>
<input class="check_single" type="checkbox" name="check_single" data-price="99.99">
td>
<td class="img_box d-flex align-items-center">
<a href=""><img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1040833709,691101433&fm=11&gp=0.jpg" alt="">a>
<span>giao！span>
td>
<td>giao！giao！giao！giao！td>
<td>giao！giao！giao！giao！td>
<td class="money">
<span>¥ 99.99span>
td>
<td>
<a type="button" class="btn btn-primary btn-sm text-light btn_delete" href="#">删除 a>
td>
tr>
<input class="d-none" id="record_total">
tbody>
table>
<div class="pay_box d-flex justify-content-between">
<div class="right_check d-flex align-items-center">
<input class="check_all" type="checkbox">
<span>全选span>
div>
<div class="pay_right d-flex align-items-center">
<div class="right_num">
<span>已选：span><span class="check_num">0span><span> 个应用span>
div>
<div class="right_price">
<span>总价：span><span class="total_price">¥ 00.00span>
div>
<div class="pay_btn">
去结算
div>
div>
div>
div>
3、最后是JS，主要通过checkbox的是否选中来判断价格的总和，和选中的数量，记得引用js
```bash
<script>
$(function () {
// 删除单条
$('.btn_delete').post({
confirm: '确定要将该产品移出购物车吗？',
success: function (r) {
$$.toast(r, function () {
location.reload();
});
}
});
// 点击单个复选框
$('.check_single').click(function () {
$('#record_total').click();
})
$('#record_total').click(function () {
var checkTotal = []; //定义一个空数组
$("input[name='check_single']:checked").not('.failure').each(function (i) {
//把所有被选中的复选框的值存入数组
checkTotal[i] = $(this).data('price');
});
// 求数组和
function sum(arr) {
return eval(arr.join("+"));
};
// 总价
var total_price = sum(checkTotal);
if (checkTotal.length == 0) {
$('.total_price').text('¥' + 0.00);
} else {
$('.total_price').text('¥' + sum(checkTotal));
}
// 已选应用
$('.check_num').text(checkTotal.length);
})
// 全选
$('.check_all').click(function () {
if ($(this).is(':checked')) {
$('input[name="check_single"]').not('.failure').each(function () {
$(this).prop("checked", true);
});
$('#record_total').click();
} else {
$('input[name="check_single"]').not('.failure').each(function () {
$(this).prop("checked", false);
});
$('#record_total').click();
}
})
});
script>