Javascript 计算所选复选框的总价

我有这段代码：

<form action="{{ URL::action('server-shop-post') }}" method="post" id="cart">
    <table class="table table-responsive">
        <thead>
            <tr><th>Check</th><th>Item</th><th>Pixel Points <span class="fa fa-cubes"></span></th></tr>
        </thead>
        <tbody>
            @foreach($shopItems as $shopItem)
                <tr>
                    <td>
                        @if(!in_array($shopItem -> id, $userPurchases))
                            <input form="cart" name="cart[]" value="{{ $shopItem -> id }}" type="checkbox">
                        @else
                            <span class="glyphicon glyphicon-ok"></span>
                        @endif
                    </td>
                    <td>
                        {{ $shopItem -> name }}
                    </td>
                    <td>
                        {{ $shopItem -> cost }}
                    </td>
                </tr>
            @endforeach
            <tr><td colspan="2">You have <span class="fa fa-cubes"></span> {{ Auth::user() -> pixel_points }}</td><td>Total cost: 200</td></tr>
        </tbody>
    </table><input type="submit">
</form>

检查项目像素点
@foreach（$shopItems作为$shopItem）
@如果（！in_数组（$shopItem->id，$userPurchases））
@否则
@恩迪夫
{{$shopItem->name}
{{$shopItem->cost}
@endforeach
您有{{Auth:：user（）->pixel_points}总成本：200

这样做的目的是创建一个装满商店物品的表格，并允许人们选中复选框“添加到购物篮”。然后，价格也显示在复选框所在的行中。 我的目标是让用户检查一个项目，并随之更新总成本。

---

如何将选中勾选框的所有值相加？

您需要使用Javascript迭代该表并将总数相加。我可能会为此使用jQuery。比如：

var total = 0;
$('input[name="cart[]"]').each(function(item){
    total += item.val();
}

---

这假设输入元素包含“value”属性中的price。

如果是一个巨大的列表，则遍历所有列表项可能会花费高昂的成本。。因此，将“onchange”事件处理程序绑定到每个复选框

$( ".aCommonClass" ).change(function() {
  //check if it was checked or unchecked.
  //based on that, add or sub the value from the total 
});

---

我已经创建了一个适用于我的案例的解决方案。真的不知道它有多可靠，它似乎工作得很好

<script>

    var cartTotal = 0;
    var fieldId;

    $('.tickbox').change(function(){
        fieldId = $(this).val();
        var value = parseInt(document.getElementById(fieldId).innerHTML);
        if($(this).is(":checked")) {
            cartTotal += value;
            document.getElementById('cart-total').innerHTML = "Total cost: " + cartTotal;

        } else {
            cartTotal -= value;
            document.getElementById('cart-total').innerHTML = "Total cost: " + cartTotal;
        }
    });
</script>

var-cartotal=0；
变量fieldId；
$（'.tickbox'）.change（函数（）{
fieldId=$（this.val（）；
var value=parseInt（document.getElementById（fieldId.innerHTML）；
如果（$（this）.is（“：checked”））{
cartotal+=值；
document.getElementById（'cart-total'）。innerHTML=“总成本：”+cartotal；
}否则{
总价值＝价值；
document.getElementById（'cart-total'）。innerHTML=“总成本：”+cartotal；
}
});

---

我希望我能解释它是如何工作的，但我真的不知道。我将标记帮助我创建答案的答案。

看看这个问题。我在那里提出了一个答案：[[1]：我不认为遍历整个列表是个好主意。。因为你可以只在复选框中添加一个事件处理程序，然后根据它是否被选中来操纵总数。我考虑过类似的事情，但我在复选框的值中有items ID，这意味着我不能这样做？@shakirt有什么好处，我在问题中错过了这一点我认为你的答案更好，但我的方法可能对与OP有类似问题的人有用，但他们可能会受到每次（或按需）计算全部金额的限制就像另一个答案一样，这不是依赖于输入的值就是价格吗？而我有id。是的，它取决于您的实现。因此，假设您使用id作为值，然后向成本添加一个“id”属性，如“cost{{{{{$shopItem->id}”，然后在发生更改时，使用上面的on change函数。从“cost_uz+$（this）.val（）中选择文本值。”，这是成本的“id”。然后，您可以轻松地选择数据并进行加法或减法。记住将文本转换为数字以进行加法/减法。我明白您的意思。但是，我在表单提交中使用id，我用它创建了一个数组。