Check if a checkbox element is checked using TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 31, 2022

banner

Check out my new book

Check if a checkbox element is checked using TypeScript #

To check if a checkbox element is checked in TypeScript:

  1. Type the element as HTMLInputElement using a type assertion.
  2. Use the checked property to see if the element is checked.
  3. The property will return true if it is checked and false otherwise.

This is the index.html file for the examples in this article.

index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> </head> <body> <input type="checkbox" name="subscribe" id="subscribe" /> <script src="./src/index.ts"></script> </body> </html>

And here is the related TypeScript code.

src/index.ts
const checkbox = document.getElementById( 'subscribe', ) as HTMLInputElement | null; if (checkbox?.checked) { console.log('Checkbox is checked'); } else { console.log('Checkbox is NOT checked'); } console.log(checkbox?.checked); // 👉️ false if (checkbox != null) { checkbox.checked = true; } console.log(checkbox?.checked); // 👉️ true

We used a type assertion to type the checkbox variable as HTMLInputElement or null.

If you're working with an option or select element, you can use the HTMLOptionElement or HTMLSelectElement types.

The reason we included null in the type is because the document.getElementById method will return null if no element with the provided id is found in the DOM.

If you are certain that the element will exist in the DOM, you can omit null from the type in the type assertion.

Now we are able to access the checked property on the element because we've typed it correctly.

The checked property returns a boolean result - true if the checkbox is checked and false otherwise.

We used the optional chaining (?.) operator to short-circuit if the reference is null or undefined.

src/index.ts
const checkbox = document.getElementById( 'subscribe', ) as HTMLInputElement | null; // 👇️ optional chaining if (checkbox?.checked) { console.log('Checkbox is checked'); } else { console.log('Checkbox is NOT checked'); }

The optional chaining (?.) operator short-circuits returning undefined if the reference is nullish.

In other words if the checkbox variable stores a null value, we won't attempt to access the checked property and get a runtime error.

We could have also used a simple if statement that serves as a type guard.

src/index.ts
const checkbox = document.getElementById( 'subscribe', ) as HTMLInputElement | null; if (checkbox != null) { if (checkbox.checked) { console.log('Checkbox is checked'); } else { console.log('Checkbox is NOT checked'); } }

We explicitly make sure that the checkbox variable does not store a null value before accessing its checked property.

Once we enter the if block, TypeScript knows that the type of the checked variable is HTMLInputElement and not HTMLInputElement | null.

It's always a best practice to include null in the type assertion because the getElementById method would return null if no element with the provided id was found.

Use the search field on my Home Page to filter through my more than 3,000 articles.