Javascript 如何根据复选框计算总价

在我们的网站，我有一个购物车表，其中包含所有的项目。每行都有复选框。通过单击复选框，它将确定您要结帐的购物车的总价。起初我不知道我的问题的标题应该是什么，因为我有两个问题

首先，当我单击所有复选框时，全选复选框将被选中，如果我取消选中一个复选框，则全选将被取消选中

第二，正确地根据复选框获取总价格。当我勾选复选框时，我可以得到总价。所有这些加起来，但如果我勾选了全选，同时选中了所有其他复选框，则会增加另一个不正确的总数。请看我上传的演示

我猜这是因为我把计算也放在了“全选”中，但实际上我已经没有办法实现这一点了

这是我的密码

桌子

---

只要在你的

$（'.选择所有“）.打开（'更改'

），它就会工作。然后删除其他部分

$('.select_all').on('change', function(){
    
    $('.cart_checkbox').not(this).prop('checked', this.checked);
    // reset total value to 0 because in below every product values are being fetched and summed up.
    overall_total = 0;

    if($(this).is(":checked")) {
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total + parseFloat(total_price);
        });
    }
    //else{
    //    $('.total_price').each(function(){
    //        total_price = $(this).data('total_price');
    //        overall_total = overall_total - parseFloat(total_price);
    //    });
    //}

    $('.overall_total').text(formatToCurrency(overall_total));
});

---

对于第一个问题，您可以检查总复选框和选中复选框的长度是否不相等，具体取决于此选中/取消选中“全选”复选框

现在，对于下一个问题，我已经将整个计算部分移动到不同的函数中，所以无论何时需要求和，都可以调用此函数，然后只循环检查trs行并更改合计值

演示代码：

$（'.select_all'）。在（'change'，function（）上{
$（'.cart_checkbox'）。不是（this.prop（'checked'，this.checked））；
sum（）；//调用这个
});
$（“.cart\u复选框”）.change（函数（）{
变量总长度=$（“.cart\u复选框”）.length；
var checked_length=$（“.cart_复选框：checked”）.length
//检查长度是否小于总长度
如果（检查长度<总长度）{
$（'.select_all'）.prop（'checked'，false）；//取消选中。。
}否则{
$（'.select_all'）.prop（'checked'，true）；//检查
}
sum（）；//调用这个
})
函数和（）{
var-total_-total=0；
//仅循环通过已检查的trs。。
$（“.cart\u复选框：选中”）.closest（“tr”）.find（“.total\u price”）.each（函数（）{
总价=$（此）。数据（“总价”）；
总体价格=总体价格+浮动价格（总价）；
})
$（'.total_total'）.text（total_total）；//添加格式fn
}

预览
产品
价格
量
全部的
“alt=”“class=“购物车预览”>
A.
₱ 34
-
“class=”购物车预览“>
A2
₱ 34
-
“class=”购物车预览“>
A3
₱ 343
-
哇！非常感谢。起初我有一个想法，计算应该在单独的函数上进行。只是不知道如何应用它。另外，我永远不会想到这一行
$（“.cart\u checkbox:checked”）.closest（“tr”）.find（“.total\u price”）.each（function（）{}）；
我不知道我可以循环检查复选框。再次感谢。
计算应该在单独的函数上。
我把整个部分放在函数中，因为你需要在多个地方使用代码，所以你可以简单地调用函数，而不是多次编写代码。啊，这样我就可以循环或重用代码。是的，重用代码：）这不适用于不减去总价。但是如果选中“全选”，它仍然会将总价添加到“总价”复选框的顶部。但是谢谢，我明白了逻辑。
var overall_total = 0;

$('.select_all').on('change', function(){
    $('.cart_checkbox').not(this).prop('checked', this.checked);

    if($(this).is(":checked")) {
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total + parseFloat(total_price);
        });
    }else{
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total - parseFloat(total_price);
        });
    }
    $('.overall_total').text(formatToCurrency(overall_total));
});

$(".cart_checkbox").change(function(){
    var total_price = $(this).closest('tr').find('.total_price').data('total_price');

    if($(this).is(":checked")) {
        overall_total = overall_total + parseFloat(total_price);
    }else{
        overall_total = overall_total - parseFloat(total_price);
    }
    $('.overall_total').text(formatToCurrency(overall_total));
})

$('.select_all').on('change', function(){
    
    $('.cart_checkbox').not(this).prop('checked', this.checked);
    // reset total value to 0 because in below every product values are being fetched and summed up.
    overall_total = 0;

    if($(this).is(":checked")) {
        $('.total_price').each(function(){
            total_price = $(this).data('total_price');
            overall_total = overall_total + parseFloat(total_price);
        });
    }
    //else{
    //    $('.total_price').each(function(){
    //        total_price = $(this).data('total_price');
    //        overall_total = overall_total - parseFloat(total_price);
    //    });
    //}

    $('.overall_total').text(formatToCurrency(overall_total));
});