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

如果列出一个巨大的列表，那么迭代所有列表项可能会很昂贵。所以绑定一个＆＃34; onchange＆＃34;每个复选框的事件处理程序。

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

Answer 2

您需要使用Javascript来迭代表并累计总金额。我可能会使用jQuery。类似的东西：

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

这假设输入元素包含＆＃34;值＆＃34;中的价格。属性。

Answer 3

我已经创建了一个适合我案例的解决方案。它真的不确定它有多可靠，它看起来效果很好。

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

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

计算所选复选框的总价

3 个答案: