Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Assign a Checked Initial Value to the Radio Button
Using the HTML <input> element, we can take input from users in a variety of ways. One such method is to collect input by giving users options from which to choose. We use HTML Radio buttons for this purpose, giving users a variety of options from which to choose their response.
The HTML Radio button defines the small circles that are highlighted when clicked. When a label is linked to a radio button, clicking the label selects the radio button. These buttons are typically displayed in radio groups (a collection of radio buttons describing a set of related options). A group of radio buttons can only have one of them selected at a time.
Input Type “radio”
The radio input type shows a radio button that can be toggled on and off by the user. The way a radio button is displayed differs from that of a checkbox. When creating a list of radio buttons, the name attribute for each option in the list must be the same. This ensures that only one radio input can be selected from the group. When the form is submitted, the contents of the value attribute corresponding to the selected radio button will be included.
The type attribute of the <input> element is used to create a radio button, as shown in the following syntax.
The radio input supports the following attributes:
Name: It denotes the name of the input elements. The radio buttons that have the same name are grouped together.
Value: It sends the selected option's value to the server.
Checked: If the user does not select an option, it is used to select one by default.
There are a couple of ways in which we can assign an initial value to a radio button. A few of them are discussed below.
Using the ‘Checked’ Attribute
The checked attribute is a Boolean attribute. When present, it indicates that an <input> element should be pre-selected or checked when the page loads.
Example
In the following example, we use the checked attribute with a value=”checked” to make any particular radio button a default choice.
<!DOCTYPE html>
<html>
<head>
<title>How to Assign a Checked Initial Value to the Radio Button</title>
</head>
<body>
<h4>Choose the Indian city that is famous for its oranges</h4>
<form id="form" action="/form/submit" method="get">
<div>
<input type="radio" id="hyd" name="city" value="hyd" checked="checked">
<label for="hyd">Hyderabad</label>
</div>
<div>
<input type="radio" id="del" name="city" value="del">
<label for="del">Delhi</label>
</div>
<div>
<input type="radio" id="nag" name="city" value="nag" >
<label for="nag">Nagpur</label>
</div>
<div>
<input type="radio" id="ind" name="city" value="ind">
<label for="ind">Indore</label>
</div>
<br/>
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded");
event.preventDefault();
}
</script>
</body>
</html>
Example
In this example, we use the checked attribute without specifying any value to make any particular radio button a default choice.
<!DOCTYPE html>
<html>
<head>
<title>How to Assign a Checked Initial Value to the Radio Button</title>
</head>
<body>
<h4>Which of the following is not a vegetable?</h4>
<form id="form" action="/form/submit" method="get">
<div>
<input type="radio" id="onion" name="vegetable" value="onion">
<label for="onion">Onion</label>
</div>
<div>
<input type="radio" id="tomato" name="vegetable" value="tomato">
<label for="tomato">Tomato</label>
</div>
<div>
<input type="radio" id="bottleguard" name="vegetable" value="bottleguard" checked>
<label for="bottleguard">Bottle-guard</label>
</div>
<div>
<input type="radio" id="pumpkin" name="vegetable" value="pumpkin">
<label for="pumpkin">Pumpkin</label>
</div>
<br/>
<input type="submit" value="Submit" />
</form>
<script>
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded");
event.preventDefault();
}
</script>
</body>
</html>
Using JavaScript
In this example, we'll use JavaScript to select a button and set it to true, allowing us to make that button the default option.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>How to Assign a Checked Initial Value to the Radio Button</title>
</head>
<body>
<p>Who is the CEO of Microsoft?</p>
<form id="form" action="/form/submit" method="get">
<input type="radio" id="Button1" name="check" />Sundar Pichai
<br>
<input type="radio" id="Button2" name="check" />Satya Nadella
<br>
<input type="radio" id="Button3" name="check" />Elon Musk
<br>
<input type="radio" id="Button4" name="check" />Tim Cook
<br>
<br>
<input type="submit" value="Submit" />
</form>
<script>
let radBtnDefault = document.getElementById("Button4");
radBtnDefault.checked = true;
var form = document.getElementById('form');
form.addEventListener('submit', showMessage);
function showMessage(event) {
alert("Your response has been recorded");
event.preventDefault();
}
</script>
</body>
</html>
136 Views
To Continue Learning Please Login