HTML checked Attribute

Photo Credit to CodeToFun

🙋 Introduction

The checked attribute is a fundamental feature in HTML, primarily associated with input elements of type checkbox or radio.

This attribute allows developers to preselect checkboxes or radio buttons, providing an initial state for these input elements.

🎯 Purpose of checked

The primary purpose of the checked attribute is to set the initial state of a checkbox or radio button.

When the checked attribute is present, the associated checkbox or radio button is selected by default when the page loads.

💎 Values

The checked attribute is a boolean attribute, meaning it doesn't require a value. It can be present or absent.

If the attribute is present, it signifies that the checkbox or radio button should be checked by default. If it's absent, the checkbox or radio button is not checked initially.

📄 Example

Let's explore a simple example of using the checked attribute with a checkbox:

checked.html

Copied

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

🧠 How it Works

In this example, the checkbox has the checked attribute present, indicating that it should be checked by default.

🔄 Dynamic Values with JavaScript

You can also dynamically set or remove the checked attribute using JavaScript.

This is useful when you want to change the state of checkboxes or radio buttons based on user interactions or certain conditions. Here's a brief example:

checked.html

Copied

<script>
  // Set the checkbox to be checked dynamically
  document.getElementById("dynamicCheckbox").checked = true;
</script>

🧠 How it Works

In this script, the checked attribute is set to true for a checkbox with the id dynamicCheckbox.

This can be beneficial when you want to dynamically preselect a checkbox based on specific user actions.

🏆 Best Practices

• Use the checked attribute to set the initial state of checkboxes or radio buttons when you want them to be selected by default.
• If you need to change the state dynamically based on user interactions, leverage JavaScript to manipulate the checked property.
• Keep in mind that the checked attribute is specific to checkboxes and radio buttons. For other input types, consider alternative attributes or methods.

🎉 Conclusion

The checked attribute is a simple yet powerful tool for controlling the initial state of checkboxes and radio buttons in HTML.

By understanding how to use this attribute, you can enhance the default behavior of your forms and improve user experience.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Telegram 450

Author

👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All