Can someone explain how this JavaScript is working?
<p>So I've managed to put together some JavaScript (with some help from others) which is basically a form that allows you to change the quantity of an item and add its value to the total if its checkbox is ticked (total displays in text field at bottom).</p>

<p>I understand some of it, its just the more complex parts of it that are confusing me (such as the logic). Could somebody talk me through or perhaps comment the main parts of my code so it can help me in understanding how the code is working. </p>

<pre><code>&lt;script type="text/javascript"&gt;
    function bump( which, bywhat ) {
        var form = document.items;
        var qty = form["qty" + which];

        qty.value = Number(qty.value) + bywhat;
        TotalCheckedValues( ); // in case user bumped an already checked line
    }

    function TotalCheckedValues( ) {
        var form = document.items;
        var total = 0;

        for ( var n = 1; n &lt;= 4; ++n )
        {
            if ( form["cb"+n].checked ) // if the checkbox of the item is ticked
            {
                total += form["cb"+n].value * form["qty"+n].value; //
            }
        }

        form.Total.value = total.toFixed(2);
    }

    function validate(evt) {
        var theEvent = evt || window.event;
        var key = theEvent.keyCode || theEvent.which;
        var regex = /[0-9]|\./;

        key = String.fromCharCode( key );

        if(!regex.test(key)) {
            theEvent.returnValue = false;
            if (theEvent.preventDefault) {
                theEvent.preventDefault();
            }
        }
    }
&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

&lt;form name="items"&gt;

Item &lt;input type="text" onkeypress='validate(event)'name="qty1" value="0"/&gt;
&lt;input type="button" onclick="bump(1,1)" value="+"/&gt;
&lt;input type="button" onclick="bump(1,-1)" value="-"/&gt;
&lt;input type="checkbox" name="cb1" value="20.00" 
onClick="TotalCheckedValues()"   /&gt;Service 1 (£20.00) &lt;br /&gt;

Item &lt;input type="text" onkeypress='validate(event)' name="qty2" value="0"/&gt;
&lt;input type="button" onclick="bump(2,1)" value="+"/&gt;
&lt;input type="button" onclick="bump(2,-1)" value="-"/&gt;
&lt;input type="checkbox" name="cb2" value="20.00"
onClick="TotalCheckedValues()"  /&gt;Service 2 (£20.00) &lt;br /&gt;

Item &lt;input type="text" onkeypress='validate(event)' name="qty3" value="0"/&gt;
&lt;input type="button" onclick="bump(3,1)" value="+"/&gt;
&lt;input type="button" onclick="bump(3,-1)" value="-"/&gt;
&lt;input type="checkbox" name="cb3" value="20.00"
onClick="TotalCheckedValues()" /&gt;Service 3 (£20.00) &lt;br /&gt;

Item &lt;input type="text" onkeypress='validate(event)' name="qty4" value="0"/&gt;
&lt;input type="button" onclick="bump(4,1)" value="+"/&gt;
&lt;input type="button" onclick="bump(4,-1)" value="-"/&gt;
&lt;input type="checkbox" name="cb4" value="10.00"
onClick="TotalCheckedValues()" /&gt;Service 4 (£10.00) &lt;br /&gt;

Total: &lt;input type="text" name="Total" readonly size="5" /&gt;

&lt;input type="reset" name="reset" value="Clear Selected"&gt;

&lt;/form&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>
