How to use jQuery to detect user checking and unchecking a checkbox

I wanted to show / hide some input fields when a user checks / unchecks a checkbox on a web page.

To investigate how I can use jQuery to detect user checking and unchecking a checkbox, I cooked up a scenario.

There is a page with a HTML checkbox and a message. When the checkbox is checked, the message shows; if not, the message hides.

Pretty straightforward scenario to get me into working out a proof of concept to fulfill my objective.

Checking whether the checkbox is checked/unchecked and showing/hiding the message

if ($('#messageVisibilityCheckbox').is(':checked')) {
	$('#messageContainer').hide();
}	
else {
	$('#messageContainer').show();
}

To know whether the checkbox with id messageVisibilityCheckbox is check, I queries it by the id and calls is(':checked').

If the checkbox is checked, I queries the HTML element with messageContainer as its id and calls the hide function; if checkbox is not checked, I calls the show function.

Detecting user clicks on the HTML checkbox using jQuery

There are two approaches which I can use for detecting the event when the user clicks on the checkbox.

1. Registering a callback function to detect user clicks on the HTML checkbox

$('#messageVisibilityCheckbox').click(
	function () {
		if ($('#messageVisibilityCheckbox').is(':checked')) {
			$('#messageContainer').hide();
		}	
		else {
			$('#messageContainer').show();
		}
});

I queries the HTML checkbox with id messageVisibilityCheckbox, calls the click function and provides callback function containing the same code segment discussed above.

2. Registering a callback function to detect value changes on the HTML checkbox

$('#messageVisibilityCheckbox').change(
	function () {
		if ($('#messageVisibilityCheckbox').is(':checked')) {
			$('#messageContainer').hide();
		}	
		else {
			$('#messageContainer').show();
		}
});

I queries the HTML checkbox with id messageVisibilityCheckbox, calls the change function and provides a callback function containing the same code segment discussed above.

The HTML document for the checkbox, message and the user interaction logic

Referencing my HTML reference and including the JavaScript codes which I had created, I got the following HTML to verify my investigations:

<html>
	<head>	
		<title>How to use jQuery to detect user checking and unchecking a checkbox</title>
		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
		<script type="text/javascript">	
		$(document).ready(function() {
			$('#messageVisibilityCheckbox').change(
				function () {
					if ($('#messageVisibilityCheckbox').is(':checked')) {
						$('#messageContainer').hide();
					}	
					else {
						$('#messageContainer').show();
					}
			});
		});	
		</script>
	</head>
	<body>
		<form>
			<input type="checkbox" id="messageVisibilityCheckbox" name="messageVisibilityCheckbox"/>
			<label for="messageVisibilityCheckbox">Hide the message below</label>
		</form>
		<div id="messageContainer">
			I am not hidden.
		</div>
	</body>
</html>
See how this proof of concept works

About Clivant

Clivant a.k.a Chai Heng enjoys composing software and building systems to serve people. He owns techcoil.com and hopes that whatever he had written and built so far had benefited people. All views expressed belongs to him and are not representative of the company that he works/worked for.