Question

I have a check box in my registration form like this:

<form name="reg" id="reg" method="post">
   <input type="checkbox" onclick="return validate('tos')" name="tos"/>
</form>

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.

Additionally, clicking it a second time doesn’t remove the green tick which it should, because the user effectively unticked the check box.

So my JS is this:

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

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

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

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

Answer 1

The following jsfiddle is a slightly modified version of your code that seems to be working fine. I don’t think your error is here. (I’m not familiar with elements; is that IE specific? I changed that to work on other browsers.)

http://jsfiddle.net/QnDAg/1/