簡單實作了一個購物車 商品 串列，計算 商品 數量 和 商品總價的功能，實作全選全不選，代碼完整，
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>全部商品 3</span>
</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.99</span>
</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.99</span>
</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">0</span><span> 個應用</span>
</div>
<div class="right_price">
<span>總價：</span><span class="total_price">￥ 00.00</span>
</div>
<div class="pay_btn">
去結算
</div>
</div>
</div>
</div>
3、最后是JS，主要通過checkbox的是否選中來判斷價格的總和，和選中的數量，記得參考js
```bash
<script>
$(function () {
// 洗掉單條
$('.btn_delete').post({
confirm: '<div class="alert alert-danger">確定要將該產品移出購物車嗎？</div>',
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230743.html
標籤：其他
上一篇：Spring 注解面面通 之 @RequestParam引數系結原始碼決議
下一篇：element-ui查看大圖