{"id":331,"date":"2013-10-24T22:28:44","date_gmt":"2013-10-24T14:28:44","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=331"},"modified":"2018-09-04T13:11:03","modified_gmt":"2018-09-04T05:11:03","slug":"how-to-use-jquery-to-detect-user-checking-and-unchecking-a-checkbox","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/how-to-use-jquery-to-detect-user-checking-and-unchecking-a-checkbox\/","title":{"rendered":"How to use jQuery to detect user checking and unchecking a checkbox"},"content":{"rendered":"

I wanted to show \/ hide some input fields when a user checks \/ unchecks a checkbox on a web page. <\/p>\n

To investigate how I can use jQuery to detect user checking and unchecking a checkbox, I cooked up a scenario.<\/p>\n

There is a page with a HTML checkbox and a message. When the checkbox is checked, the message shows; if not, the message hides.<\/p>\n

Pretty straightforward scenario to get me into working out a proof of concept to fulfill my objective. <\/p>\n

Checking whether the checkbox is checked\/unchecked and showing\/hiding the message<\/h2>\n
\r\nif ($('#messageVisibilityCheckbox').is(':checked')) {\r\n\t$('#messageContainer').hide();\r\n}\t\r\nelse {\r\n\t$('#messageContainer').show();\r\n}\r\n<\/pre>\n
To know whether the checkbox with id messageVisibilityCheckbox<\/code> is check, I queries it by the id and calls is(':checked')<\/code>. <\/p>\n
If the checkbox is checked, I queries the HTML element with messageContainer<\/code> as its id and calls<\/code> the hide function; if checkbox is not checked, I calls the show<\/code> function. <\/p>\n
Detecting user clicks on the HTML checkbox using jQuery<\/h2>\n
There are two approaches which I can use for detecting the event when the user clicks on the checkbox.<\/p>\n
1. Registering a callback function to detect user clicks on the HTML checkbox<\/h3>\n
\r\n$('#messageVisibilityCheckbox').click(\r\n\tfunction () {\r\n\t\tif ($('#messageVisibilityCheckbox').is(':checked')) {\r\n\t\t\t$('#messageContainer').hide();\r\n\t\t}\t\r\n\t\telse {\r\n\t\t\t$('#messageContainer').show();\r\n\t\t}\r\n});\r\n<\/pre>\n
I queries the HTML checkbox with id messageVisibilityCheckbox<\/code>, calls the click<\/code> function and provides callback function containing the same code segment discussed above.<\/p>\n
2. Registering a callback function to detect value changes on the HTML checkbox<\/h3>\n
\r\n$('#messageVisibilityCheckbox').change(\r\n\tfunction () {\r\n\t\tif ($('#messageVisibilityCheckbox').is(':checked')) {\r\n\t\t\t$('#messageContainer').hide();\r\n\t\t}\t\r\n\t\telse {\r\n\t\t\t$('#messageContainer').show();\r\n\t\t}\r\n});\r\n<\/pre>\n
I queries the HTML checkbox with id messageVisibilityCheckbox<\/code>, calls the change<\/code> function and provides a callback function containing the same code segment discussed above.<\/p>\n
The HTML document for the checkbox, message and the user interaction logic<\/h2>\n
Referencing my HTML reference<\/a> and including the JavaScript codes which I had created, I got the following HTML to verify my investigations:<\/p>\n
\r\n<html>\r\n\t<head>\t\r\n\t\t<title>How to use jQuery to detect user checking and unchecking a checkbox<\/title>\r\n\t\t<script src="\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.7.1\/jquery.min.js"><\/script>\r\n\t\t<script type="text\/javascript">\t\r\n\t\t$(document).ready(function() {\r\n\t\t\t$('#messageVisibilityCheckbox').change(\r\n\t\t\t\tfunction () {\r\n\t\t\t\t\tif ($('#messageVisibilityCheckbox').is(':checked')) {\r\n\t\t\t\t\t\t$('#messageContainer').hide();\r\n\t\t\t\t\t}\t\r\n\t\t\t\t\telse {\r\n\t\t\t\t\t\t$('#messageContainer').show();\r\n\t\t\t\t\t}\r\n\t\t\t});\r\n\t\t});\t\r\n\t\t<\/script>\r\n\t<\/head>\r\n\t<body>\r\n\t\t<form>\r\n\t\t\t<input type="checkbox" id="messageVisibilityCheckbox" name="messageVisibilityCheckbox"\/>\r\n\t\t\t<label for="messageVisibilityCheckbox">Hide the message below<\/label>\r\n\t\t<\/form>\r\n\t\t<div id="messageContainer">\r\n\t\t\tI am not hidden.\r\n\t\t<\/div>\r\n\t<\/body>\r\n<\/html>\r\n<\/pre>\n
\nSee how this proof of concept works<\/a>\n<\/div>\n\n