How to check if checkbox is checked javascript

Summary: in this tutorial, you will learn how to use JavaScript to test if a checkbox is checked, get the values of selected checkboxes, and select/unselect all checkboxes.

Creating an HTML checkbox

To create a checkbox, you use the <input> element with the type of checkbox as follows:

Bạn đang xem: How to check if checkbox is checked javascript

Code language: HTML, XML (xml)

It’s a good practice to always associate a checkbox with a label to improve usability and accessibility. By doing this, clicking the label also checks or unchecks the checkbox.

Code language: HTML, XML (xml)

Or:

Code language: HTML, XML (xml)

Note that the for attribute’s value of the label must match the id of the checkbox.

The following works but is bad practice so you should avoid it:

Code language: HTML, XML (xml)

Checking if a checkbox is checked

A checkbox has two states: checked and unchecked.

To get the state of a checkbox, you follow these steps:

• First, select the checkbox using a DOM method such as getElementById() or querySelector().
• Then, access the checked property of the checkbox element. If its checked property is true, then the checkbox is checked; otherwise, it is not.

See the following example:

Code language: HTML, XML (xml)

In this example:

Xem thêm: Cách kiểm tra dung lượng gói cước 4g mobifone

First, create the HTML checkbox element:

Code language: HTML, XML (xml)

Second, select the checkbox with id #accept and examine the checked property:

Code language: JavaScript (javascript)

Because the checkbox is unchecked, you’ll see false in the console:

Code language: JavaScript (javascript)

Consider another example:

Code language: HTML, XML (xml)

In this example, the selector #accept:checked selects the element with the id #accept and has the attribute checked. For example, it matches the following element:

Code language: HTML, XML (xml)

But not this one:

Code language: HTML, XML (xml)

Xem thêm: Cách chặn mail gửi đến

Therefore, if the checkbox element with the id #accept is checked, the document.querySelector() will return it. On the console window, you’ll see the value false because the checkbox is unchecked:

Code language: JavaScript (javascript)

Getting checkbox values

The following page shows a checkbox and a button. When you click the button, you’ll see the checkbox’s value on the console window:

Code language: HTML, XML (xml)

When you get the value attribute of a checkbox, you always get the ‘on’ string whether the checkbox is checked or not.

Getting values of multiple selected checkboxes

The following page shows three checkboxes. If you select one or more checkboxes and click the button, it’ll show the values of the selected checkbox:

Code language: HTML, XML (xml)

How it works.

In the HTML, we create three checkbox elements with the same name (color) but distinct values:

Code language: HTML, XML (xml)

In the JavaScript:

First, add the click event handler to the button:

Code language: JavaScript (javascript)

Second, select the selected checkboxes using the document.querySelectorAll() method inside the click event handler:

Code language: JavaScript (javascript)

Third, push the values of the selected checkboxes to an array:

Code language: JavaScript (javascript)

Demo:

Check / Uncheck all checkboxes

The following page has three checkboxes and a button. When you click the button, if the checkboxes are checked, they will be unchecked and vise versa:

Code language: HTML, XML (xml)

How it works:

First, define the check() function that checks or unchecks all checkboxes with the name “color”:

Code language: JavaScript (javascript)

When you click the button, it checked all the checkboxes. And. If you click the button again, it should uncheck all the checkboxes. To do this switch, you need to reassign the click event handler whenever the click event fires.

Second, select the #btn button and assign the checkAll() function to the onclick property of the button:

Code language: JavaScript (javascript)

Xem thêm: Cách từ chối lời tỏ tình

Third, define the checkAll() function that checks all the checkboxes:

Code language: JavaScript (javascript)

Finally, define the uncheckAll() function that unchecks all the checkboxes:

Code language: JavaScript (javascript)

Demo:

Creating checkboxes dynamically

The following example shows how to create checkboxes dynamically using JavaScript:

Code language: HTML, XML (xml)

Output:

Code language: HTML, XML (xml)

How it works.

First, define an array that consists of three strings. In practice, you may have the array that comes from the result of an API call:

Code language: JavaScript (javascript)

Second, iterate over the array elements and:

1) Generate a unique id for each checkbox:

Code language: JavaScript (javascript)

2) Create a label and assign the id to the for attribute:

Code language: JavaScript (javascript)

3) Create a checkbox:

Code language: JavaScript (javascript)

4) Place the checkbox inside the label:

Code language: CSS (css)

5) Create a text node and append it to the label:

Code language: CSS (css)

6) Add the label to the root element:

Code language: CSS (css)

The following example also dynamically generates checkboxes like the above example:

Code language: HTML, XML (xml)

In this example:

Xem thêm: Cách kiểm tra dung lượng gói cước 4g mobifone

• First, generate a label and checkbox element using the Array map() method and template literals.
• Second, join the HTML strings into a single HTML using the String join() method.
• Third, append the HTML to the #root element.

Summary

• Use the <input> element with the type checkbox to create a checkbox element.
• Place a checkbox inside a label element to improve the usablity and accessibility.
• Use checkbox.checked property or :check selector to test if a checkbox is checked.
• Get the value attribute to get the value of a checkbox.