HTML checked Attribute

The HTML checked attribute specifies that an <input> element should be selected (checked) when the page first loads. It applies only to <input type="checkbox"> and <input type="radio">.

checked is a boolean attribute. A boolean attribute is one whose presence alone is what matters — checked, checked="", and checked="checked" are all equivalent and all mean "true". You cannot set it to false by writing checked="false"; to make a control start out unchecked, simply leave the attribute off entirely.

Radio buttons vs. checkboxes

The two input types share the checked attribute but behave differently:

Radio buttons that share the same name form a mutually exclusive group. At most one option in the group can be checked at a time, so adding checked to more than one radio in a group is pointless — only the last one wins. It is good practice to pre-check one radio so the group always has a value.
Checkboxes are independent. Any number of them (including none) can be checked at the same time, so you may add checked to as many as you like.

Syntax

<input type="checkbox|radio" checked>
<input type="checkbox|radio" checked="checked">

Example: radio buttons

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>HTML Form Example</h2>
    <form action="/form/submit" method="post">
      <input type="radio" name="game" value="football" checked /> Football
      <input type="radio" name="game" value="basketball" /> Basketball
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Try it Yourself »

The football radio is pre-selected when the page loads. Because both inputs share name="game", picking Basketball automatically deselects Football.

Example: checkboxes

Here several checkboxes are pre-checked at once — something you can't do with a radio group:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <h2>Pick your toppings</h2>
    <form action="/form/submit" method="post">
      <label><input type="checkbox" name="topping" value="cheese" checked /> Cheese</label>
      <label><input type="checkbox" name="topping" value="mushrooms" checked /> Mushrooms</label>
      <label><input type="checkbox" name="topping" value="olives" /> Olives</label>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>

Wrapping each control in a <label> makes the text clickable and is announced together with the checkbox state by screen readers (for example "Cheese, checkbox, checked"), which improves accessibility.

Setting and reading checked with JavaScript

The HTML attribute only sets the initial state. To check, uncheck, or read a control after the page has loaded, use the live checked DOM property, which is a boolean:

<!DOCTYPE html>
<html>
  <body>
    <input type="checkbox" id="subscribe" /> Subscribe
    <button onclick="toggle()">Toggle</button>
    <p id="status"></p>

    <script>
      const box = document.getElementById("subscribe");

      // Set the state programmatically
      box.checked = true;

      function toggle() {
        // Read the live state, then flip it
        box.checked = !box.checked;
        document.getElementById("status").textContent =
          "Checked: " + box.checked;
      }
    </script>
  </body>
</html>

The `checked` attribute vs. the `checked` property

These two are easy to confuse:

The HTML attribute checked describes the initial (default) state written in the markup. In the DOM it is mirrored by the defaultChecked property and never changes once the page is loaded — even after the user clicks.
The DOM property element.checked reflects the current, live state. It is what you read to find out whether the box is checked right now, and what you assign to change it.

// <input type="checkbox" id="box" checked>
const box = document.getElementById("box");
box.click();                 // user unchecks it

box.checked;                 // false  → current state
box.defaultChecked;          // true   → original HTML attribute
box.hasAttribute("checked"); // true   → the attribute is still present

How checkboxes behave on form submission

When a form is submitted, only checked controls send their name/value pair. An unchecked checkbox is omitted from the request body entirely — it does not appear as an empty value. So if a user leaves the Olives box unchecked in the example above, the POST body contains topping=cheese&topping=mushrooms with no mention of olives.

A checkbox without an explicit value attribute submits the value on when checked. If you need to detect "unchecked" on the server, add a hidden field with the same name before the checkbox as a fallback.

<input> tag — the element that uses checked
<form> tag — collects and submits checked controls
HTML disabled attribute — prevents interaction with an input; a disabled checkbox is not submitted even when checked
<select> tag — for single- or multiple-choice dropdowns as an alternative to radios and checkboxes

Practice

What does the HTML 'checked' attribute do?

It specifies that a checkbox or radio button should be selected when the page first loads.It sets the default text value of an input element.It provides a hint for the user on the expected value of an input element.It indicates that a checkbox or radio button cannot be interacted with.It specifies that a text input should be pre-filled with specified text when the page loads.It permanently locks the current state so JavaScript cannot change it.