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>全部商品 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>