themeleaf+ajax实现多选框改变span标签内容以及获取多选框内容

今天在写项目的时候需要写一个这样的

当我勾选了之后商品总价会根据勾选的内容变化，并且点击确认结算后可以获取已勾选行中需要的内容

一开始我是这样写的

1.复选框

<input class="goodsbox" name="checkbox"  th:name="${list.tbGoodsdetail.getTotalPrice()}" type="checkbox" th:value="${list.getCarId()}" />

2.确认结算按钮ajax

    $(function() {
//获取所有复选框
        $("#buyButton").click(function() {
            text = $("input:checkbox[name='checkbox']:checked").map(function() {
                return $(this).val();
            }).get();
            alert(text)
            $.post("/shopcar/selectGoods",{"carId":text},function () {
                if(data.state==200){
                location.href="/BuyCar_2"
                }else{
                    alert(data.msg);
                }
            })
        });
    });

这样写输出的text是一个以逗号分割的字符串

3.计算价格并显示到页面上（复选框点击事件）

<script>
    $(".goodsbox").click(function () {
        var checkbox=false;
        var span = $("#totalprice").html();
        if(this.checked==true) {
            checkbox=true;
        }
        var cariddata = $("#databox").val();
        var goodsprice = $(this).attr("name");
        if(checkbox) {
            $.post("/shopcar/addprice",{"goodsprice":goodsprice,"totalprice":span},function (data) {
                if(data.state==200){
                    $("#totalprice").html(data.msg);
                }else{
                    alert(data.msg);
                }
            })
        }else{
            $.post("/shopcar/minusprice",{"goodsprice":goodsprice,"totalprice":span},function (data) {
                if(data.state==200){
                    $("#totalprice").html(data.msg);
                }else{
                    alert(data.msg);
                }
            })
        }
    })
</script>

然而。。。
这样写在复选框里会有两个name！！
然后确认结算按钮事件就用不了了
所以我只好改了一下，在计算价格（复选框点击事件）就将需要的内容拼接到一个hidden的文本框里，在确认结算按钮的点击事件里就直接把文本框的内容读取并传到后台

改了之后就是这样

修改后

隐藏的文本框和复选框

<input  id="databox" type="hidden" >
<input class="goodsbox"  th:name="${list.getCarId()}" type="checkbox" th:value="${list.tbGoodsdetail.getGOldPrice()}" />

计算价格（复选框点击事件）

<script>
    $(".goodsbox").click(function () {
        var checkbox=false;
        var span = $("#totalprice").html();
        var object = $(this);
        if(this.checked==true) {
            checkbox=true;
        }
        var cariddata = $("#databox").val();
        var goodsprice = $(this).attr("value");
        if(checkbox) {
            $.post("/shopcar/addprice",{"goodsprice":goodsprice,"totalprice":span},function (data) {
                if(data.state==200){

                    $("#totalprice").html(data.msg);
                    var finalid = cariddata+','+object.attr("name");
                    $("#databox").val(finalid);
                }else{
                    alert(data.msg);
                }
            })
        }else{
            $.post("/shopcar/minusprice",{"goodsprice":goodsprice,"totalprice":span},function (data) {
                if(data.state==200){
                    $("#totalprice").html(data.msg);
                    var removeid = ','+object.attr("name");
                    var finalid = cariddata.replace(removeid,'');
                    $("#databox").val(finalid);
                }else{
                    alert(data.msg);
                }
            })
        }
    })
</script>

首先确定当前该复选框是选中或者取消选中，如果是选中将checkbox置为true。并执行addprice，进行价格计算以及拼接字符串。反之执行minusprice，计算价格，将字符串移除。
结算按钮点击事件

    $(function() {
//获取所有复选框
        $("#buyButton").click(function() {
            var carId = $("#databox").val();
            if(carId==''){
                alert("暂未选择商品")
                return;
            }
            $.post("/shopcar/selectGoods",{"carId":carId},function () {
                if(data.state==200){

                    alert("可以了")
                }else{
                    alert(data.msg);
                }
            })
        });
    });

完成了之后效果就是这样的：
一开始：

选中两条数据

取消选中一条数据后

点击确认结算

获取的数据后台用split分割就行

如果有好的方法或者有改进的地方欢迎各位大佬在评论区指出T T