Checkbox undefined behavior

Question

I have a problem with radio buttons and checkboxes.

Please, see snippet below. The idea is the following: when user pushes 'I want to participate' button, the code should check if user had selected the checkbox and raise alert if not.

The alert is raised when needed, but when I close it, the checkbox becomes marked even if it was not before. Why it happens?

Thanks a lot!

<html> <body> <div id="consent"></div> </body> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <script type="text/javascript"> function consent() { var HTMLtext = "<label> <input type='checkbox' name='cons' value='agree' id='consAgree' /> I am age 18 or older and understand the information above. <\label><br>"; HTMLtext += "<br><span id='submit_cons'><button type='button' onClick='javascript:evaluateConsent()'>I want to participate </button></span>"; document.getElementById('consent').innerHTML = HTMLtext; } function evaluateConsent() { var isOK = 1; if(document.getElementById("consAgree").checked == false) { isOK = 0; } if(isOK == 0) { alert('Please make sure you have confirmed all three conditions.\nIf you do not want ot participate, return the HIT'); } else { var HTMLtext = "Thank you! Now take a look at the example!"; document.getElementById('submit_cons').innerHTML = HTMLtext + "<hr>"; } } /*--MAIN--*/ function main(){ consent(); } $(document).ready(function() {	//Ensure that form is not submitted upon pressing Enter key	$(window).keydown(function(event){	if(event.keyCode == 13) {	event.preventDefault();	return false;	}	});	//call function to run experiment	main(); }); </script> </head> </html>

Ele · Accepted Answer · 2018-01-29 00:53:50Z

You're closing the label tag as follow: <\label>, that's incorrect change to this </label>

function consent() { var HTMLtext = "<label> <input type='checkbox' name='cons' value='agree' id='consAgree' /> I am age 18 or older and understand the information above. </label><br>"; HTMLtext += "<br><span id='submit_cons'><button type='button' onClick='javascript:evaluateConsent()'>I want to participate </button></span>"; document.getElementById('consent').innerHTML = HTMLtext; } function evaluateConsent() { var isOK = 1; if (document.getElementById("consAgree").checked == false) { isOK = 0; } if (isOK == 0) { alert('Please make sure you have confirmed all three conditions.\nIf you do not want ot participate, return the HIT'); } else { var HTMLtext = "Thank you! Now take a look at the example!"; document.getElementById('submit_cons').innerHTML = HTMLtext + "<hr>"; } } /*--MAIN--*/ function main() { consent(); } $(document).ready(function() { //Ensure that form is not submitted upon pressing Enter key $(window).keydown(function(event) { if (event.keyCode == 13) { event.preventDefault(); return false; } }); //call function to run experiment main(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> <div id="consent"></div>

See? now it's not being checked.

Collectives™ on Stack Overflow

Checkbox undefined behavior

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related