console.log无法正常工作复选框bootstrap-toggle

Question

我在违规表中有score字段。而且我有很多复选框。当我选中检查框时，总分数是用ajax收集的。我使用了http://www.bootstraptoggle.com/

几乎与此演示类似的一件事。 http://jsfiddle.net/zch11bjo/1

<div class="panel-body">
    <div class="table-responsive">
        <table class="table table-bordered">
            @foreach($infractions as $infraction)
                <tr>
                    <th>{{ $infraction->title }}</th>
                    <td>
                        <input type="checkbox" name="infractions[{{ $infraction->id }}]" value="1" data-toggle="toggle" data-on="Yes" data-off="No" data-onstyle="success" data-offstyle="danger" data-score="{{ $infraction->score }}" onClick="updateTotal();">
                    </td>
                </tr>
            @endforeach
        </table>
    </div>
    <div class="text-right">Total:
        <span id="total">0</span>
    </div>
</div>

ajax

function updateTotal() {
    console.log("Hello World");
    var checked = document.querySelectorAll('input[type=checkbox]:checked');
    var score = 0;

    Array.prototype.forEach.call(checked, function(el, i){
        score += parseInt(el.getAttribute('data-score'));
    });

    console.log(score);
    document.getElementById('total').innerHTML = score;
}

  

注意：当我更改以下代码时。解决了总和问题。

<input type="checkbox" data-score="{{ $infraction->score }}" onClick="updateTotal();">