javascript - 计算所选复选框的总价

Question

我有这一段代码:

<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>

它的作用是创建一个充满商店商品的表格，并允许人们选中复选框以“添加到购物篮”。然后价格也会显示在与复选框相同的行中。 我的目标是让用户检查一个项目，并随之更新总成本。 如何将选中复选框的所有值添加到一起？

Answer 1

如果列表很大，则迭代所有列表项的成本可能会很高。因此，将“onchange”事件处理程序绑定(bind)到每个复选框。

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