Checkbox js toggling incorrectly
<p>I have a check box in my registration form like this:</p>

<pre><code>&lt;form name="reg" id="reg" method="post"&gt;
   &lt;input type="checkbox" onclick="return validate('tos')" name="tos"/&gt;
&lt;/form&gt;
</code></pre>

<p>And I am using JS to check if its ticked, and if so, display a green tick in the form. However, its not actually ticking the check box when its clicked but it is loading the green tick. </p>

<p>Additionally, clicking it a second time doesn't remove the green tick which it should, because the user effectively unticked the check box.</p>

<p>So my JS is this:</p>

<pre><code>function validate (type){
    output = [];
    var x = document.getElementById("reg");

    if (type == 'tos'){
        div = 'result_tos';
        input = x.elements[4].checked;

        if (input){
            output.push('&lt;img src="correct.png"/&gt;');    
        } else {
            output.push('You must agree to our terms of service in order to join !');
        }

        document.getElementById(div).innerHTML = (output.join('')); //display result
    }
}
</code></pre>
