Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

HTML DOM Input Checkbox defaultChecked Property

HTML Web Development Front End Technology

The HTML DOM input checkbox defaultChecked property returns the default value of the checked attribute of a checkbox element. This property reflects whether the checkbox was initially checked when the page loaded, regardless of its current state.

Syntax

Following is the syntax for getting the defaultChecked property −

checkboxObject.defaultChecked

This property returns a boolean value −

  • true − if the checkbox was initially checked (had the checked attribute)
  • false − if the checkbox was initially unchecked

Understanding defaultChecked vs checked

The defaultChecked property differs from the checked property −

  • defaultChecked − Returns the original state of the checkbox when the page loaded
  • checked − Returns the current state of the checkbox (can change with user interaction)

Example − Basic defaultChecked Usage

Following example demonstrates the defaultChecked property with an initially checked checkbox −

<!DOCTYPE html>
<html>
<head>
   <title>HTML DOM defaultChecked Property</title>
   <style>
      body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
      .container { max-width: 500px; margin: 0 auto; }
      input[type="checkbox"] { width: 20px; height: 20px; margin: 10px; }
      button { background-color: #007bff; color: white; padding: 10px 20px; 
               border: none; border-radius: 5px; cursor: pointer; margin: 10px; }
      .result { margin: 20px 0; padding: 15px; background-color: #f8f9fa; 
                border-radius: 5px; font-weight: bold; }
   </style>
</head>
<body>
   <div class="container">
      <h2>defaultChecked Property Example</h2>
      <p>This checkbox is initially checked:</p>
      <input type="checkbox" id="myCheckbox" checked>
      <label for="myCheckbox">Subscribe to newsletter</label>
      <br><br>
      <button onclick="checkDefault()">Check Default State</button>
      <div id="result" class="result"></div>
   </div>
   <script>
      function checkDefault() {
         var checkbox = document.getElementById("myCheckbox");
         var result = document.getElementById("result");
         
         if (checkbox.defaultChecked === true) {
            result.innerHTML = "? This checkbox was initially checked (defaultChecked = true)";
            result.style.color = "#28a745";
         } else {
            result.innerHTML = "? This checkbox was initially unchecked (defaultChecked = false)";
            result.style.color = "#dc3545";
         }
      }
   </script>
</body>
</html>

The output shows that even if the user unchecks the checkbox, the defaultChecked property still returns true −

defaultChecked Property Example

This checkbox is initially checked:
? Subscribe to newsletter

[Check Default State]

? This checkbox was initially checked (defaultChecked = true)

Example − Comparing defaultChecked vs checked

Following example shows the difference between defaultChecked and checked properties −

<!DOCTYPE html>
<html>
<head>
   <title>defaultChecked vs checked Comparison</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; max-width: 600px; margin: 0 auto; }
      .checkbox-group { margin: 20px 0; padding: 15px; border: 1px solid #ddd; border-radius: 5px; }
      input[type="checkbox"] { width: 18px; height: 18px; margin-right: 8px; }
      button { background-color: #6c757d; color: white; padding: 8px 16px; 
               border: none; border-radius: 4px; cursor: pointer; margin: 5px; }
      .comparison { display: flex; justify-content: space-between; margin: 10px 0; }
      .property { padding: 10px; background-color: #f8f9fa; border-radius: 4px; flex: 1; margin: 0 5px; }
   </style>
</head>
<body>
   <h2>defaultChecked vs checked Property Comparison</h2>
   
   <div class="checkbox-group">
      <p><strong>Initially Checked Checkbox:</strong></p>
      <input type="checkbox" id="checkbox1" checked>
      <label for="checkbox1">Option 1 (initially checked)</label>
   </div>
   
   <div class="checkbox-group">
      <p><strong>Initially Unchecked Checkbox:</strong></p>
      <input type="checkbox" id="checkbox2">
      <label for="checkbox2">Option 2 (initially unchecked)</label>
   </div>
   
   <button onclick="compareProperties()">Compare Properties</button>
   
   <div id="results"></div>
   
   <script>
      function compareProperties() {
         var cb1 = document.getElementById("checkbox1");
         var cb2 = document.getElementById("checkbox2");
         var results = document.getElementById("results");
         
         results.innerHTML = `
            <h3>Comparison Results:</h3>
            <div class="comparison">
               <div class="property">
                  <strong>Checkbox 1</strong><br>
                  defaultChecked: ${cb1.defaultChecked}<br>
                  checked: ${cb1.checked}
               </div>
               <div class="property">
                  <strong>Checkbox 2</strong><br>
                  defaultChecked: ${cb2.defaultChecked}<br>
                  checked: ${cb2.checked}
               </div>
            </div>
            <p><em>Try checking/unchecking the boxes and click "Compare Properties" again to see how 'checked' changes but 'defaultChecked' remains the same.</em></p>
         `;
      }
   </script>
</body>
</html>

This example clearly shows that defaultChecked reflects the initial state while checked reflects the current state −

defaultChecked vs checked Property Comparison

Initially Checked Checkbox:
? Option 1 (initially checked)

Initially Unchecked Checkbox:
? Option 2 (initially unchecked)

[Compare Properties]

Comparison Results:
Checkbox 1                    Checkbox 2
defaultChecked: true          defaultChecked: false
checked: true                 checked: false

Example − Reset Checkbox to Default State

Following example demonstrates using defaultChecked to reset checkboxes to their original state −

<!DOCTYPE html>
<html>
<head>
   <title>Reset to Default State</title>
   <style>
      body { font-family: Arial, sans-serif; padding: 20px; max-width: 500px; margin: 0 auto; }
      .form-group { margin: 15px 0; padding: 10px; border: 1px solid #e0e0e0; border-radius: 5px; }
      input[type="checkbox"] { margin-right: 8px; }
      button { padding: 10px 15px; margin: 5px; border: none; border-radius: 4px; cursor: pointer; }
      .reset-btn { background-color: #17a2b8; color: white; }
      .check-btn { background-color: #28a745; color: white; }
      .status { margin: 10px 0; padding: 10px; background-color: #f1f3f4; border-radius: 4px; }
   </style>
</head>
<body>
   <h2>Reset Checkboxes to Default State</h2>
   
   <div class="form-group">
      <input type="checkbox" id="option1" checked>
      <label for="option1">Email notifications (initially checked)</label>
   </div>
   
   <div class="form-group">
      <input type="checkbox" id="option2">
      <label for="option2">SMS notifications (initially unchecked)</label>
   </div>
   
   <div class="form-group">
      <input type="checkbox" id="option3" checked>
      <label for="option3">Newsletter subscription (initially checked)</label>
   </div>
   
   <button class="reset-btn" onclick="resetToDefault()">Reset to Default</button>
   <button class="check-btn" onclick="showStatus()">Show Current Status</button>
   
   <div id="status" class="status"></div>
   
   <script>
      function resetToDefault() {
         var checkboxes = document.querySelectorAll('input[type="checkbox"]');
         
         checkboxes.forEach(function(checkbox) {
            checkbox.checked = checkbox.defaultChecked;
         });
         
         showStatus();
         alert("All checkboxes reset to their default state!");
      }
      
      function showStatus() {
         var status = document.getElementById("status");
         var checkboxes = document.querySelectorAll('input[type="checkbox"]');
         var statusText = "<strong>Current Status:</strong><br>";
         
         checkboxes.forEach(function(checkbox, index) {
            var label = checkbox.nextElementSibling.textContent;
            statusText += `Option ${index + 1}: checked = ${checkbox.checked}, defaultChecked = ${checkbox.defaultChecked}<br>`;
         });
         
         status.innerHTML = statusText;
      }
   </script>
</body>
</html>

This example shows how to use defaultChecked to restore checkboxes to their original state after user interaction.

Common Use Cases

The defaultChecked property is commonly used for −

  • Form reset functionality − Restoring form fields to their initial state
  • Detecting changes − Comparing current state with the original state
  • Form validation − Checking if required checkboxes maintain their default values
  • User preference tracking − Determining if users changed default settings
Property Description Changes with User Interaction
defaultChecked Returns the initial state when page loaded No − always reflects the original HTML
checked Returns the current state of the checkbox Yes − changes when user clicks the checkbox

Conclusion

The defaultChecked property provides a way to access the original state of a checkbox element as defined in the HTML. Unlike the checked property, defaultChecked never changes and always reflects whether the checkbox had the checked attribute when the page was first loaded. This makes it useful for form reset operations and detecting user modifications.

Updated on: 2026-03-16T21:38:53+05:30

456 Views

Learn More in Our Tutorials

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements