How to check if Checkbox is checked or not in jQuery?
Answer: Using the checked property of the checkbox which can be accessed using the prop() function in jQuery, but there are many more ways.
If you want to check if a checkbox in a form is checked by the user or not, you can do so by checking the checked property of the checkbox element, which is a standard property of the HTML checkbox element.
Using the checked property works well because all checkboxes have a property checked which stores the state of the checkbox.
Although we can also use the is() event handler in jquery to check if a checkbox is checked or not.
Apart from the above two ways, another way of doing this in jQuery would be by using the :not() selector or the .not() method available in jQuery.
So let's round up the number of ways to achieve this:
-
Using the prop() function in jQuery, we can check if the checkbox is checked or not.
-
Using the is() method in jQuery, we can check if the checkbox is checked or not.
-
Using the :not() selector or the .not() method in jQuery, we can check if the checkbox is checked or not.
Yes, so we have 3 different ways to check if a checkbox is checked or not. Let's see all of them in action.
Using jQuery prop() method:
Following is the code example for using the prop() method to check if the checkbox is checked or not,
<!doctype html>
<head>
<title>Check if Checkox is checked</title>
</head>
<body>
<h3>Play around with checkboxes</h3>
<div>
<input type="checkbox" name="checkme" id="checkbox-1"> Check me
</div>
<div>
<input type="checkbox" name="checkmenot" id="checkbox-2"> Check me not!
</div>
<br/>
<div>
<button id="actionBtn">Check</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#actionBtn").on('click', function(){
if($("#checkbox-1").prop("checked") == true) {
alert("Checkbox 1 is checked");
}
else {
alert("Checkbox 1 is not checked");
}
});
</script>
</body>
</html>
Here is the live running example of the above code.
The main jQuery part is:
if($("#checkbox-1").prop("checked") == true)
{
// checkbox is checked
}
else {
// checkbox not checked
}
You can use anything to identify your checkbox element. It can be an id attribute or a class attribute. Generally, we should use the id attribute because it is unique.
Using jQuery is() method:
Following is the code for using the is() method to check if a checkbox is checked or not in jQuery.
<!doctype html>
<head>
<title>Check if Checkox is checked</title>
</head>
<body>
<h3>Play around with checkboxes</h3>
<div>
<input type="checkbox" name="checkme" id="checkbox-1"> Check me
</div>
<div>
<input type="checkbox" name="checkmenot" id="checkbox-2"> Check me not!
</div>
<br/>
<div>
<button id="actionBtn">Check</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$("#actionBtn").on('click', function(){
if($("#checkbox-1").is(":checked") == true) {
alert("Checkbox 1 is checked");
}
else {
alert("Checkbox 1 is not checked");
}
});
</script>
</body>
</html>
Here is a live running example for the above code example.
The main jQuery part is:
if($("#checkbox-1").is(":checked") == true)
{
// checkbox is checked
}
else {
// checkbox not checked
}
Using the :not() selector or .not() method:
This way is to check if a checkbox is not checked, but can be used to check if the checkbox is checked too.
Here is a code example,
$("#actionBtn").on('click', function(){
if(!$("#checkbox-1").not(":checked").length) {
alert("Checkbox 1 is checked");
}
else {
alert("Checkbox 1 is not checked");
}
});
In the code above, we have used the length property to check for the length of the not-checked checkbox. And if you look closely we have also used the NOT operator (!)
We hope one of the 3 ways mentioned above suits your requirements and works for you.
Frequently Asked Questions:
Here are some frequently asked questions to help you further.
How to use jQuery in my code?
You can directly use the CDN link to add the jQuery script to your HTML code using the HTML script tag.
Here is an example,
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
Copy and paste this code in the head section of your HTML code or in the body section. In the above code, we have imported the jQuery version 3.6.0 into our HTML code.
Do I need to install anything to use jQuery?
No, you do not have to install anything in your local machine to run jQuery. jQuery is a Javascript library that runs in the browser.
