In jQuery, a Checkbox’s state can be checked using prop() method and :checked selector.
The following are the detailed discussions on How to check checkbox status using jQuery prop() method and by using :checked selector.
1) Using prop() Method
The jQuery prop() method is basically used to get and set properties of a form control. But here we will check if the checked property of the checkbox is there or not.
<script>
$(function () {
$("input:checkbox").on("change",function(){
if($(this).prop("checked")){
console.log("Checkbox Checked!");
}else{
console.log("Checkbox UnChecked!");
}
});
});
</script>
2) Using :checked Selector
The :checked selector can be used to get the current state of a checkbox
<script>
$(function () {
$("input:checkbox").on("change",function(){
if($(this).is(":checked")){
console.log("Checkbox Checked!");
}else{
console.log("Checkbox UnChecked!");
}
});
});
</script>
