JavaScript Checkbox

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:

<input type="checkbox" id="accept"> Accept 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.

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes">  Accept 
</label>Code language: HTML, XML (xml)

Or:

<input type="checkbox" id="accept" name="accept" value="yes">  
<label for="accept"> Accept </label>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:

<input type="checkbox" id="accept" name="accept" value="yes"> AcceptCode 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:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>
<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    </label>

    <script>
        const cb = document.querySelector('#accept');
        console.log(cb.checked); // false
    </script>

</body>

</html>Code language: HTML, XML (xml)

In this example:

First, create the HTML checkbox element:

<label for="accept">
   <input type="checkbox" id="accept" name="accept" value="yes"> Accept 
</label>Code language: HTML, XML (xml)

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

const cb = document.querySelector('#accept');
console.log(cb.checked);Code language: JavaScript (javascript)

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

falseCode language: JavaScript (javascript)

Consider another example:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>

<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept" value="yes"> Accept
    </label>

    <script>
        const checked = document.querySelector('#accept:checked') !== null;
        console.log(checked); // false
    </script>

</body>
</html>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:

<input type="checkbox" id="accept" checked> AcceptCode language: HTML, XML (xml)

But not this one:

<input type="checkbox" id="accept"> AcceptCode language: HTML, XML (xml)

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:

falseCode 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:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Checkbox</title>
</head>

<body>
    <label for="accept">
        <input type="checkbox" id="accept" name="accept"> Accept
    </label>

    <button id="btn">Submit</button>
    <script>
        const cb = document.querySelector('#accept');
        const btn = document.querySelector('#btn');
        btn.onclick =