title: Checkbox js toggling incorrectly
body: <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>