JSFiddle - React, Tailwind, and code Playground

by Adam Doherty

HTML

<tr>
    <td style="width: 200px">&nbsp;&nbsp;
        <label>Subject</label>&nbsp;</td>
    <label class="checkbox">
        <td colspan="1">
            <input value="50" type="checkbox" class="sum" onChange="add()" data-toggle="checkbox">Bahasa Malaysia</label>
    <label class="checkbox">
        <td colspan="1">
            <input value="50" type="checkbox" class="sum" onChange="add()" data-toggle="checkbox">Bahasa Inggeris</td>
    </label>
    <label class="checkbox">
        <td colspan="1">
            <input value="50" type="checkbox" class="sum" onChange="add()" data-toggle="checkbox">Bahasa Cina</td>
    </label>
    <label class="checkbox">
        <td colspan="1">
            <input value="50" type="checkbox" class="sum" onChange="add()" data-toggle="checkbox">Mathematic</td>
    </label>
    <label class="checkbox">
        <td colspan="1">
            <input value="50" type="checkbox" class="sum" onChange="add()" data-toggle="checkbox">Math Tambahan</td>
    </label>
</tr>

JavaScript

var inputs = document.getElementsByClassName('sum'),
    total = document.getElementById('fees');

var add = function () {
    var amount = 0;
    for (var i = 0; i < inputs.length; i++) {
        if (inputs[i].checked === true) {
            amount += parseInt(inputs[i].value, 10);
        }
    }
    console.log(amount);
};