Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to handle when checkbox 'checked state' changed event in jQuery?
To handle the checkbox checked state, use the change event. It will check whether the checkbox is checked or not.
The change event is triggered whenever the state of a checkbox changes from checked to unchecked or vice versa. You can use different jQuery methods to detect the checked state:
-
.prop("checked")? Returns true/false (recommended method) -
.is(":checked")? Returns true/false -
.attr("checked")? Returns the attribute value
Example
You can try to run the following code to learn how to handle when checkbox checked state changed event in jQuery ?
<!doctype html>
<html>
<head>
<title>jQuery Checkbox state</title>
<style>
b {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input id="checkbox1" type="checkbox" checked="checked">
<label for="checkbox1">Check/ Uncheck this checkbox</label>
<p></p>
<script>
$("input").change(function() {
var $input = $(this);
$("p").html(
".attr("checked"): <b>" + $input.attr("checked") + "</b><br>" +
".prop("checked"): <b>" + $input.prop("checked") + "</b><br>" +
".is(":checked"): <b>" + $input.is(":checked") + "</b>"
);
}).change();
</script>
</body>
</html>
The output of the above code will show the different values returned by each method when you check or uncheck the checkbox. The .prop("checked") and .is(":checked") methods return boolean values, while .attr("checked") returns the attribute value.
Conclusion
Using the change event with jQuery is the most effective way to handle checkbox state changes. The .prop("checked") method is recommended for checking the current state of a checkbox in modern jQuery versions.
3K+ Views
