How to Check If a Checkbox Is Checked in JavaScript and jQuery

Checkboxes are a common way to allow users to select multiple options from a list. In JavaScript and jQuery, there are a few different ways to check whether a checkbox is checked. The most common ones include: the checked property, :checked selector and the prop() method.

Let’s take a look at each one and how to apply. 

3 Ways to Check Whether a Checkbox Is Checked in JavaScript and jQuery

1. Checked Property

The most straightforward way to check whether a checkbox is checked is to use the checked property. This property is a boolean value that indicates whether the checkbox is checked or not. For example, the following code would check whether the checkbox with the ID myCheckbox is checked:

var isChecked = document.getElementById("myCheckbox").checked;

If the checkbox is checked, the value of isChecked will be true. If the checkbox is not checked, the value of isChecked will be false.

More on JavaScriptHow to Check If an Object Has a Property in JavaScript

2. :Checked Selector

In jQuery, you can also use the :checked selector to check whether a checkbox is checked. The :checked selector selects all checkbox elements that are currently checked. For example, the following code would check whether the checkbox with the ID myCheckbox is checked:

var isChecked = $("#myCheckbox").is(":checked");

If the checkbox is checked, the value of isChecked will be true. If the checkbox is not checked, the value of isChecked will be false.

3. Prop() Method 

The prop() method can also be used to check whether a checkbox is checked. The prop() method takes two arguments: the name of the property and the value of the property. For example, the following code would check whether the checkbox with the ID myCheckbox is checked:

var isChecked = $("#myCheckbox").prop("checked");

If the checkbox is checked, the value of isChecked will be true. If the checkbox is not checked, the value of isChecked will be false.

More on JavaScriptHow to Convert a JavaScript String to a Number

Best Method to Check If a Checkbox Is Checked in JavaScript and jQuery

The method you choose to use to check whether a checkbox is checked will depend on your specific needs. If you are working in plain JavaScript, the checked property is the simplest option. If you are working with jQuery, the :checked selector or the prop() method are both good options.

Here is an example of how to use these methods in a real-world application:

// Check whether the checkbox is checked
var isChecked = $("#myCheckbox").is(":checked");

// If the checkbox is checked, do something
if (isChecked) {
  // Do something
}

I hope this blog post has helped you understand how to check whether a checkbox is checked in JavaScript and jQuery. 

Frequently Asked Questions