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
HTML DOM Input Radio defaultChecked Property
The HTML DOM Input Radio defaultChecked property determines whether a radio button was checked by default when the page first loaded. It returns true if the radio button has the checked attribute in the HTML markup, otherwise it returns false. This property reflects the initial state, not the current checked state.
Syntax
Following is the syntax for the Radio defaultChecked property −
radioObject.defaultChecked
Return Value
The defaultChecked property returns a Boolean value −
-
true − If the radio button has the
checkedattribute in HTML -
false − If the radio button does not have the
checkedattribute in HTML
Example − Basic Usage
Following example demonstrates the defaultChecked property with a radio button that has the checked attribute −
<!DOCTYPE html>
<html>
<head>
<title>Input Radio defaultChecked Property</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Input Radio defaultChecked Property</h2>
<form>
<p>Select your favorite fruit:</p>
<input type="radio" name="fruits" id="mango" checked> Mango<br>
<input type="radio" name="fruits" id="apple"> Apple<br>
<input type="radio" name="fruits" id="banana"> Banana
</form>
<br>
<button type="button" onclick="checkDefault()">Check Default</button>
<p id="result"></p>
<script>
function checkDefault() {
var defaultValue = document.getElementById("mango").defaultChecked;
document.getElementById("result").innerHTML = "Mango radio button default checked value: " + defaultValue;
}
</script>
</body>
</html>
The output shows that the Mango radio button returns true for defaultChecked since it has the checked attribute −
Select your favorite fruit: ? Mango ? Apple ? Banana [Check Default] Mango radio button default checked value: true
Example − Comparing defaultChecked vs checked
Following example demonstrates the difference between defaultChecked and checked properties −
<!DOCTYPE html>
<html>
<head>
<title>defaultChecked vs checked</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>defaultChecked vs checked Properties</h2>
<form>
<p>Choose a color (Red is default):</p>
<input type="radio" name="colors" id="red" checked> Red<br>
<input type="radio" name="colors" id="blue"> Blue<br>
<input type="radio" name="colors" id="green"> Green
</form>
<br>
<button type="button" onclick="compareProperties()">Compare Properties</button>
<p id="comparison"></p>
<script>
function compareProperties() {
var redRadio = document.getElementById("red");
var blueRadio = document.getElementById("blue");
var result = "<strong>Red Radio:</strong><br>";
result += "defaultChecked: " + redRadio.defaultChecked + "<br>";
result += "checked: " + redRadio.checked + "<br><br>";
result += "<strong>Blue Radio:</strong><br>";
result += "defaultChecked: " + blueRadio.defaultChecked + "<br>";
result += "checked: " + blueRadio.checked;
document.getElementById("comparison").innerHTML = result;
}
</script>
</body>
</html>
Try selecting different radio buttons and then clicking "Compare Properties". The defaultChecked value remains constant, while checked reflects the current selection −
Red Radio: defaultChecked: true checked: false (if Blue is selected) Blue Radio: defaultChecked: false checked: true (if Blue is selected)
Example − Multiple Radio Groups
Following example shows defaultChecked with multiple radio button groups −
<!DOCTYPE html>
<html>
<head>
<title>Multiple Radio Groups</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 10px;">
<h2>Multiple Radio Button Groups</h2>
<form>
<fieldset>
<legend>Size:</legend>
<input type="radio" name="size" id="small"> Small<br>
<input type="radio" name="size" id="medium" checked> Medium<br>
<input type="radio" name="size" id="large"> Large
</fieldset>
<br>
<fieldset>
<legend>Color:</legend>
<input type="radio" name="color" id="red2" checked> Red<br>
<input type="radio" name="color" id="blue2"> Blue<br>
<input type="radio" name="color" id="green2"> Green
</fieldset>
</form>
<br>
<button type="button" onclick="checkAllDefaults()">Check All Defaults</button>
<div id="allResults"></div>
<script>
function checkAllDefaults() {
var radios = document.querySelectorAll('input[type="radio"]');
var results = "<h3>Default Checked Status:</h3>";
radios.forEach(function(radio) {
results += radio.id + ": " + radio.defaultChecked + "<br>";
});
document.getElementById("allResults").innerHTML = results;
}
</script>
</body>
</html>
This example shows that only the radio buttons with the checked attribute return true for defaultChecked −
Default Checked Status: small: false medium: true large: false red2: true blue2: false green2: false
Key Points
- Static Property − The defaultChecked property is read-only and reflects the initial HTML state.
-
HTML Attribute − It corresponds to the presence of the
checkedattribute in the HTML markup. -
Persistence − Unlike the
checkedproperty, defaultChecked does not change when users interact with radio buttons. - Form Reset − When a form is reset, radio buttons return to their defaultChecked state.
-
Boolean Return − Always returns
trueorfalse, nevernullorundefined.
Conclusion
The defaultChecked property provides access to the original checked state of radio buttons as defined in HTML. Unlike the checked property which reflects current user selections, defaultChecked remains constant and is useful for form validation, reset functionality, and determining initial radio button states.
193 Views
