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>
Check whether a checkbox is checked using 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
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:
Check whether a checkbox is checked using 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
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:
Check whether a checkbox is checked using :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
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:
