HTML checked Attribute
The checked attribute in HTML is used to indicate whether an element should be checked when the page loads up. It is a Boolean attribute.
Note: It can be used with <input> element only where the type is either “checkbox” or “radio”. This attribute has been DEPRECATED and is no longer recommended.
Supported Tags:
Syntax:
<input type = "checkbox|radio" checked>Example 1: In this example, the checked attribute, sets the first checkbox as checked by default, while the second checkbox remains unchecked, allowing users to toggle selections.
<!DOCTYPE html>
<html>
<head>
<title>HTML checked Attribute</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML checked Attribute</h2>
<form>
<!-- Below input elements have attribute "checked" -->
<input type="checkbox"
name="check"
value="1"
checked>
Checked by default<br>
<input type="checkbox"
name="check"
value="2">
Not checked by default<br>
</form>
</body>
</html>
Output:
Example 2: In this example we are using the checked attribute, automatically selecting the first radio button by default. The second radio button is not selected by default, offering an alternative choice.
<!DOCTYPE html>
<html>
<head>
<title>HTML checked Attribute</title>
</head>
<body style="text-align: center;">
<h1 style="color: green;">GeeksforGeeks</h1>
<h2>HTML checked Attribute</h2>
<form>
<!-- Below input elements have attribute "checked" -->
<input type="radio"
name="check"
value="1" checked>
Selected by default<br>
<input type="radio"
name="check"
value="2">
Not selected by default<br>
</form>
</body>
</html>
Output:
Supported Browsers: The browser supported by checked attribute are listed below:
HTML checked Attribute – FAQs
Can I use the checked attribute with other input types?
No, the checked attribute is only applicable to checkbox and radio input types.
How do I change the checked state of an element using JavaScript?
You can change the checked state using JavaScript by accessing the element and setting its checked property, like this: document.getElementById(‘myCheckbox’).checked = true;.
What is the difference between checked and selected in HTML?
The checked attribute is used with checkbox and radio inputs to mark them as selected, while selected is used with <option> elements within a <select> dropdown to preselect an option.
Can a radio button group have more than one checked radio button?
No, in a radio button group, only one radio button can be checked at a time. If multiple buttons are marked checked, the browser will preselect the last one in the HTML code.
How do I uncheck a checkbox by default?
To ensure a checkbox is unchecked by default, simply omit the checked attribute from the <input> element. If the attribute is present, the checkbox will be checked.
