Home »
jQuery »
jQuery Examples
How do I check whether a checkbox is checked in jQuery?
Learn how do I check whether a checkbox is checked in jQuery?
Submitted by Pratishtha Saxena, on May 08, 2022
In jQuery, there are majorly two ways to determine whether the checkbox is checked or unchecked.
- prop() method
- is() method
- jQuery :checked Selector
Note: Always remember to apply the jQuery CDN link before writing the function.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
1) Using the jQuery prop () Method
This method is very simple and it tells us the current status of the checkbox.
Syntax:
$(selector).prop(parameter)
Where, the parameter can be checked or unchecked depending upon how you want to know the current status of the checkbox.
Example 1:
jQuery:
<script>
$(document).ready(function(){
$('#myform').click(function(){
var res = $('input[type="checkbox"]').prop(":checked");
if(res){
alert("CheckBox is Checked");
}
else{
alert("CheckBox is unchecked");
}
});
});
</script>
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myform">
<input type="checkbox" name="country" value="India">India
<br>
<input type="checkbox" name="country" value="England">England
<br>
<input type="checkbox" name="country" value="USA">USA
<br><br>
</form>
</body>
</html>
Output:
2) Using the jQuery is() Method
Like prop() method, is() method is also very simple to use and understand. It works in every case. It checks whether the checkbox is selected or not.
Syntax:
$(selector).is(parameter)
Example 2:
jQuery:
<script>
$(document).ready(function(){
$('#myform').click(function(){
if($("input[type=’checkbox’]").is(":checked")){
alert("Check box is Checked");
}
else{
alert("Check box is unchecked");
}
});
});
</script>
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myform">
<input type="checkbox" name="country" value="India">India
<br>
<input type="checkbox" name="country" value="England">England
<br>
<input type="checkbox" name="country" value="USA">USA
<br><br>
</form>
</body>
</html>
Output:
3) Using the jQuery :checked Selector
Using this way also, you can check the status of the checkbox. This checks whether the checkbox is selected or not and gives true or false respectively. It can also be used for radio buttons.
Syntax:
$(selector):checked
Example 3:
jQuery:
<script>
$(document).ready(function() {
$("#myform").click(function() {
var res = $("input[type='checkbox']:checked");
if (res) {
alert("Check box is Checked");
} else {
alert("Check box is Unchecked");
}
});
});
</script>
HTML Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form id="myform">
<input type="checkbox" name="country" value="India">India
<br>
<input type="checkbox" name="country" value="England">England
<br>
<input type="checkbox" name="country" value="USA">USA
<br><br>
</form>
</body>
</html>
Output:
