How to check if checkbox is checked in jQuery?

MoreOnFew
Posted underjQuery

It is very easy to check if a checkbox is checked in jQuery using the .is() or .prop() method of jQuery combined with the ‘:checked’ selector. There are other ways too like checking for the attribute checked value, however, they aren’t very reliable. The easiest and most stable way to check if checkbox is checked in jQuery is to use the .is(‘:checked’) method or the .prop(‘checked’) method. Let us take a look at how to do so using both the methods along with examples.

Solutions to check if checkbox is checked in jQuery

There are 2 solutions to check if checkbox is checked in jQuery.

  • Solution 1 : Using the is() jQuery method
  • Solution 2 : Using the prop() jQuery method

Let us take a look at both of these methods with examples.

Solution 1: Using the .is() jQuery method to check if checkbox is checked

As I mentioned earlier, one of the effective ways to check if checkbox is checked is to use the .is() jquery method along with the :checked‘ selector. Let us take a look at how to do it.

Example showing how to check if checkbox is checked in jQuery using .is(‘:checked’)

In the example below we’ll see how to check if checkbox is checked on button click using jQuery.

The jQuery Code

function statusCheck() {

    let status = $('#colorcheckbox').is(':checked');
    console.log(status);
}

The HTML code

<input type="checkbox" id="colorcheckbox" name="color" value="red"/> Red

<button onclick="statusCheck()">Check</button>
Example showing how to check if checkbox is checked in jQuery
Example showing How to check if checkbox is checked in jQuery using the .is(‘:checked’) method

As you can see in the code above, we are using the $(element).is(‘:checked’) method to find out if the checkbox is checked. When the checkbox gets checked, we get a boolean value of true in return. Whereas, if the checkbox is unchecked, it would return a boolean value of false. Since the .is(‘:checked’) returns a boolean value in return, we can use it to write our conditional statements. For example:

if ($('#colorcheckbox').is(':checked')) {
    // some code here that executes only when the checkbox is checked
}

//OR

const CheckboxStatus = $('#colorcheckbox').is(':checked');

if (CheckboxStatus) {
    // code here
}

Solution 2: Using the .prop() jQuery method to check if checkbox is checked

The second solution to check if checkbox is checked in jQuery is to use the .prop() method in jQuery. This is very similar to the previous solution of using .is() method. However, instead of using .is(), we would be using the .prop() method. Let us take a look at an example.

Example showing how to check if checkbox is checked in jQuery using the .prop() method

function statusCheck() {
  let status = $("#colorcheckbox").prop("checked"); // use .prop() method
  console.log("Status =", status);
}

In the code above you can notice that we have used the .prop() method instead of the .is() method. Also, if you notice carefully, we have used just “checked” instead of the “:checked”.

 How to check if checkbox is checked in jQuery using .prop()
Example showing how to check if checkbox is checked in jQuery using .prop() method

Similar to the .is(‘:checked’) method, the .prop(‘checked’) method too returns a boolean value of true or false. Hence, we can use it to write conditional statements too.

To conclude, you can see that we can either use the .is(‘:checked’) method or we can use the .prop(‘checked’) method to easily know if a checkbox is checked in jQuery. JQuery has many such methods and selectors which when used correctly, makes it easy for us to access the DOM elements or their attributes and values. Hope you got the answer to your query. Check out our other jQuery tutorials and articles too.

TaggedHow-tojQueryJquery API


MoreOnFew.com – Read tutorials related to JavaScript, jQuery, HTML5, CSS3 and more !

Cover Image for [Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

[Solved] Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’

You might be facing an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’ ” error if you are using the react-router-dom package version 6. This error is caused due to using the older switch syntax of the react-router-dom. From version 6 onwards, the react-router-dom has replaced “Switch” with “Routes”. Let us take a look … Read more

MoreOnFew
Cover Image for How to check if an element is hidden in jQuery?

How to check if an element is hidden in jQuery?

Whether you are new to jQuery or not, you must have come across a situation where you had to check if an element is hidden in jQuery. While this might sound like an easy task, it can get tricky. Don’t worry, you can check if an element is hidden in jQuery using the simple ways … Read more

MoreOnFew