Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to select a radio button by default in JavaScript?
Radio buttons allow users to select one option from multiple choices. Unlike checkboxes, only one radio button in a group can be selected at a time. To make a radio button selected by default, you can use the HTML checked attribute or JavaScript's checked property.
Basic Radio Button Syntax
Radio buttons are created using the HTML <input> tag with type="radio":
<input type="radio" name="group" value="option1"> Option 1 <input type="radio" name="group" value="option2"> Option 2
Method 1: Using HTML checked Attribute
The simplest way to select a radio button by default is adding the checked attribute directly in HTML:
<!DOCTYPE html> <html> <body> <h3>Select your gender:</h3> <input type="radio" name="gender" value="male" checked> Male<br> <input type="radio" name="gender" value="female"> Female<br> <input type="radio" name="gender" value="other"> Other </body> </html>
Method 2: Using JavaScript checked Property
You can select a radio button by default using JavaScript by setting the checked property to true:
<!DOCTYPE html>
<html>
<body>
<h3>Choose your city:</h3>
<input type="radio" id="hyderabad" name="city" value="hyderabad"> Hyderabad<br>
<input type="radio" id="delhi" name="city" value="delhi"> Delhi<br>
<input type="radio" id="mumbai" name="city" value="mumbai"> Mumbai
<script>
// Select Delhi by default
document.getElementById("delhi").checked = true;
</script>
</body>
</html>
Method 3: Using defaultChecked Property
The defaultChecked property checks if a radio button was originally set as checked in the HTML:
<!DOCTYPE html>
<html>
<body>
<input type="radio" name="choice" id="option1" checked> Option 1 (Default)
<input type="radio" name="choice" id="option2"> Option 2
<button onclick="checkDefault()">Check if Option 1 is default</button>
<p id="result"></p>
<script>
function checkDefault() {
let isDefault = document.getElementById("option1").defaultChecked;
document.getElementById("result").innerHTML =
"Option 1 is default checked: " + isDefault;
}
</script>
</body>
</html>
Method 4: Selecting Radio Button After Page Load
You can also select a radio button dynamically after the page loads using event listeners:
<!DOCTYPE html>
<html>
<body>
<h3>Age Group:</h3>
<input type="radio" id="minor" name="age" value="minor"> Minor (Under 18)<br>
<input type="radio" id="adult" name="age" value="adult"> Adult (18-65)<br>
<input type="radio" id="senior" name="age" value="senior"> Senior (65+)
<script>
// Wait for page to load, then select "Adult" by default
window.onload = function() {
document.getElementById("adult").checked = true;
};
</script>
</body>
</html>
Comparison of Methods
| Method | When to Use | Advantage |
|---|---|---|
checked attribute |
Static default selection | Simple, works without JavaScript |
checked property |
Dynamic selection | Flexible, can change based on conditions |
defaultChecked |
Checking original state | Useful for form validation |
Conclusion
Use the HTML checked attribute for static defaults, or JavaScript's checked property for dynamic radio button selection. Both methods ensure one radio button is pre-selected when the page loads.
14K+ Views
