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 object
The HTML DOM Input Radio object represents an <input> element with type="radio". Radio buttons allow users to select one option from a group of related choices. The Input Radio object provides properties and methods to dynamically create, access, and manipulate radio button elements using JavaScript.
Syntax
Following is the syntax for creating an input radio object −
var radioElement = document.createElement("INPUT");
radioElement.setAttribute("type", "radio");
Following is the syntax for accessing an existing input radio object −
var radioElement = document.getElementById("radioId");
Properties
Following are the key properties of the Input Radio object −
| Property | Description |
|---|---|
| autofocus | Sets or returns whether the radio button should automatically get focus when the page loads. |
| checked | Sets or returns the checked state of the radio button. |
| defaultChecked | Returns the default value of the checked attribute. |
| defaultValue | Sets or returns the default value of the radio button. |
| disabled | Sets or returns whether the radio button is disabled. |
| form | Returns a reference to the form containing the radio button. |
| name | Sets or returns the name attribute value of the radio button. |
| required | Sets or returns whether the radio button must be selected before form submission. |
| type | Returns the form element type for the radio button. |
| value | Sets or returns the value attribute of the radio button. |
Creating an Input Radio Object
You can create a radio button dynamically using the createElement() method and setting the type attribute to "radio".
Example
<!DOCTYPE html>
<html>
<head>
<title>Create Input Radio Object</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Input Radio Object Creation</h2>
<p>Click the button to create a radio button dynamically:</p>
<button type="button" onclick="createRadio()">CREATE RADIO BUTTON</button>
<br><br>
<div id="radioContainer"></div>
<script>
function createRadio() {
var radioElement = document.createElement("INPUT");
radioElement.setAttribute("type", "radio");
radioElement.setAttribute("name", "fruit");
radioElement.setAttribute("value", "apple");
radioElement.setAttribute("id", "appleRadio");
var label = document.createElement("LABEL");
label.setAttribute("for", "appleRadio");
label.textContent = " Apple";
var container = document.getElementById("radioContainer");
container.appendChild(radioElement);
container.appendChild(label);
}
</script>
</body>
</html>
The output shows a button that creates a radio button with a label when clicked −
Input Radio Object Creation Click the button to create a radio button dynamically: [CREATE RADIO BUTTON] (After clicking, a radio button labeled "Apple" appears)
Accessing Radio Button Properties
Once you have a reference to a radio button object, you can access and modify its properties.
Example
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Properties</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Radio Button Properties Example</h2>
<form>
<input type="radio" id="small" name="size" value="small">
<label for="small">Small</label><br>
<input type="radio" id="medium" name="size" value="medium" checked>
<label for="medium">Medium</label><br>
<input type="radio" id="large" name="size" value="large">
<label for="large">Large</label><br><br>
</form>
<button onclick="showProperties()">Show Properties</button>
<button onclick="checkSmall()">Check Small</button>
<button onclick="disableLarge()">Disable Large</button>
<p id="output"></p>
<script>
function showProperties() {
var mediumRadio = document.getElementById("medium");
var output = "Medium radio properties:<br>";
output += "Checked: " + mediumRadio.checked + "<br>";
output += "Value: " + mediumRadio.value + "<br>";
output += "Name: " + mediumRadio.name + "<br>";
output += "Type: " + mediumRadio.type + "<br>";
output += "Disabled: " + mediumRadio.disabled;
document.getElementById("output").innerHTML = output.replace(/<br>/g, "<br>");
}
function checkSmall() {
document.getElementById("small").checked = true;
}
function disableLarge() {
document.getElementById("large").disabled = true;
}
</script>
</body>
</html>
The output demonstrates accessing and modifying radio button properties −
Radio Button Properties Example ? Small ? Medium (initially checked) ? Large [Show Properties] [Check Small] [Disable Large] (Clicking "Show Properties" displays the medium radio's properties) Medium radio properties: Checked: true Value: medium Name: size Type: radio Disabled: false
Working with Radio Button Groups
Radio buttons with the same name attribute form a group where only one can be selected at a time.
Example
<!DOCTYPE html>
<html>
<head>
<title>Radio Button Groups</title>
</head>
<body style="font-family: Arial, sans-serif; padding: 20px;">
<h2>Radio Button Group Example</h2>
<form>
<h3>Select your favorite programming language:</h3>
<input type="radio" id="html" name="language" value="html">
<label for="html">HTML</label><br>
<input type="radio" id="css" name="language" value="css">
<label for="css">CSS</label><br>
<input type="radio" id="javascript" name="language" value="javascript">
<label for="javascript">JavaScript</label><br><br>
<button type="button" onclick="getSelectedValue()">Get Selected</button>
<button type="button" onclick="clearSelection()">Clear Selection</button>
</form>
<p id="result"></p>
<script>
function getSelectedValue() {
var radios = document.getElementsByName("language");
var selectedValue = "";
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedValue = radios[i].value;
break;
}
}
document.getElementById("result").textContent =
selectedValue ? "Selected: " + selectedValue : "No selection made";
}
function clearSelection() {
var radios = document.getElementsByName("language");
for (var i = 0; i < radios.length; i++) {
radios[i].checked = false;
}
document.getElementById("result").textContent = "";
}
</script>
</body>
</html>
The example shows how to work with a group of radio buttons, getting the selected value and clearing selections −
Radio Button Group Example Select your favorite programming language: ? HTML ? CSS ? JavaScript [Get Selected] [Clear Selection] (When JavaScript is selected and "Get Selected" is clicked) Selected: javascript
Conclusion
The HTML DOM Input Radio object provides comprehensive control over radio button elements through JavaScript. You can dynamically create radio buttons, access their properties like checked, value, and disabled, and manage groups of related radio buttons. This makes radio buttons highly flexible for creating interactive forms and user interfaces.
262 Views
