Bind to checkbox change and click event with JavaScript/jQuery
This post will discuss how to bind to HTML checkbox change and click event in JavaScript and jQuery.
There are several ways to bind to HTML checkbox change or click event with JavaScript and jQuery.
1. Using jQuery
With jQuery, you can use the .is() method, which matches the contents of a jQuery object against a selector. The following code demonstrates this with the :checked CSS pseudo-class selector.
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if ($(this).is(':checked')) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
Alternatively, you can use jQuery’s .prop() method, which returns true when the input checkbox is checked and false otherwise.
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if ($(this).prop("checked")) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
Instead of using jQuery’s is() or prop() method, you can directly access the .checked property of the DOM element to determine whether the checkbox is checked.
JS
|
1 2 3 4 5 6 7 8 9 10 |
$(document).ready(function() { $('input[type=checkbox][name=gender]').change(function() { if (this.checked) { alert(`${this.value} is checked`); } else { alert(`${this.value} is unchecked`); } }); }); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
Note, all above examples use an attributeEquals selector $('input[type=checkbox][name=gender]') to find all checkboxes. You can also use the :checkbox pseudo-selector $(':checkbox').
Note that you can also bind to the checkbox’s click event instead of the change event.
2. Using JavaScript
With pure JavaScript, you can use the EventTarget.addEventListener() method to bind to the checkbox’s click or change event.
JS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
document.addEventListener('DOMContentLoaded', function() { var checkboxes = document.querySelectorAll('input[type=checkbox][name=gender]'); for (var checkbox of checkboxes) { checkbox.addEventListener('change', function(event) { if (event.target.checked) { alert(`${event.target.value} is checked`); } else { alert(`${event.target.value} is unchecked`); } }); } }, false); |
HTML
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!doctype html> <html> <body> <p>Gender:</p> <div> <input type="checkbox" id="male" name="gender" value="male"> <label for="male">Male</label> </div> <div> <input type="checkbox" id="female" name="gender" value="female"> <label for="female">Female</label> </div> <br> </body> </html> |
CSS
|
1 2 3 4 5 6 7 8 |
p, label { font: 15px 'Exo 2', sans-serif; } input { margin: 6px; } |
That’s all about binding to checkbox change and click event in JavaScript and jQuery.
Thanks for reading.
To share your code in the comments, please use our online compiler that supports C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.
Like us? Refer us to your friends and support our growth. Happy coding :)