Use the jQuery prop()
method & :checked
selector
The following section describes how to track the status of checkboxes whether it is checked or not using the jQuery prop()
method as well as the :checked
selector.
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
console.log("Checkbox is checked.");
}
else if($(this).prop("checked") == false){
console.log("Checkbox is unchecked.");
}
});
});
</script>
You can also use the jQuery :checked
selector to check the status of checkboxes. The :checked
selector specifically designed for radio button and checkboxes.
Let's take a look at the following example to understand how it basically works:
<script>
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).is(":checked")){
console.log("Checkbox is checked.");
}
else if($(this).is(":not(:checked)")){
console.log("Checkbox is unchecked.");
}
});
});
</script>