JQuery购物车商品全选，多选购买功能实现(Spring boot + thymeleaf)

实现效果图：红格子都是可以变动的

1.全选按钮

<div class="cart-title">
<h4 class="panel-title">
    <span><input type="checkbox" class="select_all"/>全选</span><span>商品</span><span>|单价</span><span>|数量</span><span>|总价</span><span>|操作</span></h4>
</div>

如果点击

//全选按钮:随时监听$()
$(function () {
    $(".select_all").change(function () {
        var status = $(".select_all").prop("checked");
        $(".cart_item .shop_checkbox").prop("checked",status);
        if(status){
            var total_price = 0;
            var total_quantity =0;
            $(".totalPrice").each(function () {
                var singleTotalPrice = parseFloat($(this).text());
                total_price +=singleTotalPrice;
            });
            $(".buy_num").each(function () {
                var singleQuantity = parseFloat($(this).val());
                total_quantity +=singleQuantity;
            });
            $("#all_total").text(total_price);
            $("#total-quantity").text(total_quantity);
        }else{
            $("#all_total").text(0.00);
            $("#total-quantity").text(0);
        }

    });
});

2.购物车列表前的复选框

含有 th:οnclick=“|methods(’ $ {arg1}’,’${arg2}’)|"；或者用th:data-id传参都行

html

<ul class="cart_item">
   <li class="td td-check">
       <div class="td-inner">
           <div style="height: 82px;position: relative;">
               <div class="cart-checkbox">
                   <input type="hidden" class="order_id" th:value="${order.id}">
                   <input type="checkbox" class="shop_checkbox" th:onclick="|changeTotalPrice('${iterStat.index}')|"/>
               </div>
           </div>
       </div>
   </li>
   <li class="td td-item">