JSFiddle - React, Tailwind, and code Playground

by chauhangs

HTML

<form name="form2">
    <input type="text" name="thetotal" />
    <table width="800" border="0" cellspacing="0" cellpadding="10">
        <tr>
            <td width="5%">
                <input type="checkbox" name="check" id="check" onclick='add(922.63, this);' />
            </td>
            <td width="20%">5847454</td>
            <td width="35%">Company1</td>
            <td width="20%">2013-04-10 04:11:02</td>
            <td width="20%">&pound;922.63</td>
        </tr>
        <tr>
            <td width="5%">
                <input type="checkbox" name="check" id="check" onclick='add(341.2, this);' />
            </td>
            <td width="20%">5847455</td>
            <td width="35%">Company2</td>
            <td width="20%">2013-04-10 07:01:46</td>
            <td width="20%">&pound;341.2</td>
        </tr>
        <tr>
            <td width="5%">
                <input type="checkbox" name="check" id="check" onclick='add(60, this);' />
            </td>
            <td width="20%">5847456</td>
            <td width="35%">Company3</td>
            <td width="20%">2013-04-10 07:01:37</td>
            <td width="20%">&pound;60</td>
        </tr>
        <tr>
            <td width="5%">
                <input type="checkbox" name="check" id="check" onclick='add(158.4, this);' />
            </td>
            <td width="20%">5847457</td>
            <td width="35%">Company4</td>
            <td width="20%">2013-04-10 07:01:30</td>
            <td width="20%">&pound;158.4</td>
        </tr>
    </table>
</form>

JavaScript

function add(total, this_chk_bx) {
    var thetotal = form2.thetotal.value;

    if (this_chk_bx.checked == true) {
        //add if its checked
        form2.thetotal.value = Number(thetotal) + Number(total);
    } else {
        //subtract if its unchecked
        form2.thetotal.value = thetotal - total;
    }
}