Home > jQuery > How to Check If Checkbox is Checked or Not in jQuery?

How to Check If Checkbox is Checked or Not in jQuery?

To check if the checkbox is checked or not using jQuery, you can use the two ways. There are jQuery methods props() and is() which we can use to check the status of the checkbox element.

The prop() method is used to set or return the values of selected elements, but in our case, we need to return the value. The prop() method should only be used to get the value of the property from DOM.

Syntax

The is() method is used to match the value of the selector element. It returns true if there is a matching element found, and false if not. So in our case for the checkbox checked, we will use the :checked as a selector element.

Syntax

Let’s see examples of using prop() and is() methods to check whether a checkbox is checked or not.

Check with prop() Method

Let’s take an example of the prop() method to check the checkbox whether checked or not by getting the value of the property.

Example 1

In this above code, we take three checkboxes of different cars and one submit button to check the value of those checkboxes which is checked.

To get the value of checked checkboxes, we made a jquery script for the click event. It will check each checkbox and if any are found with the checked status it will alert the value of it.

Example 2

In the 2nd example, you can also get the value of checked checkboxes when the user clicks on specific. Simply you just need to add the click event on the checkbox element.

Check with is() Method

You can also use the is() jQuery method to check the status of the checkbox and whether it is checked or not. You have to pass the :checked selector within the is() method.

Let’s now see the example of jQuery is() method with selector element (:checked).

Example 3

In the above code, we take the checkboxes and one button to trigger the event. Then we made the click event on the button to check each checkbox to check the status using the is() method with :checked selector. If any match is found it will alert the value of it.

Same as the prop() method, you can also make a click event on them. When the user checked any specific checkbox will get the value of it.

Example 4

In the 2nd example, you can also get the value of checked checkboxes when the user clicks on specific. Simply you just need to add the click event on the checkbox element.

Check if Checkbox not Checked

If you want to know if the checkbox is not checked then you can use the :not() selector method with :checked selector to target those that are not checked yet.

Example 5

See all the above examples of jQuery prop(), is(), :not, and :checked methods here in the codepen. Follow on codepen for more examples.

See the Pen
jQuery prop(), is() Method Checkbox Examples
by Aman Mehra (@amanmehra)
on CodePen.

Photo of author

About Aman Mehra

Hey there! I'm Aman Mehra, a full-stack developer with over six years of hands-on experience in the industry. I've dedicated myself to mastering the ins and outs of PHP, WordPress, ReactJS, NodeJS, and AWS, so you can trust me to handle your web development needs with expertise and finesse. In 2021, I decided to share my knowledge and insights with the world by starting this blog. It's been an incredible journey so far, and I've had the opportunity to learn and grow alongside my readers. Whether you're a seasoned developer or just dipping your toes into the world of web development, I'm here to provide valuable content and solutions to help you succeed. So, stick around, explore the blog, and feel free to reach out if you have any questions or suggestions. Together, let's navigate the exciting world of web development!

Leave a Comment