Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
HTML DOM Input Radio Checked Property
The HTML DOM Input Radio checked property is associated with the checked property of an <input> element with type radio. It is used to basically set or return the checked attribute value of the radio button.
Syntax
Following is the syntax for −
Setting the checked property.
radioObject.checked = true|false
Example
Let us look at an example for the Radio checked property −
<!DOCTYPE html>
<html>
<body>
<h1>Input Radio checked property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango">Mango
<input type="radio" name="fruits" id="Apple">Apple
</form>
<br><button type=”button” onclick="checkApple()">Check Apple</button>
<script>
function checkApple() {
document.getElementById("Apple").checked = true;
}
</script>
</body>
</html>
Output
This will produce the following output −
On clicking the “Check Apple” button −
In the above example −
We have two input fields inside a form having common attributes type=“radio” and name=“fruits”. The first radio button has id “Mango” and second one has id “Apple” −
<form> FRUIT: <input type="radio" name="fruits" id="Mango">Mango <input type="radio" name="fruits" id="Apple">Apple </form>
We have then created a button “Check Apple” that will execute the checkApple() method when clicked by the user −
<button type=”button” onclick="checkApple()">Check Apple</button>
The checkApple() method gets the input element with type radio using the getElementById() method and set its checked property to true. This checks the apple radio button: −
function checkApple() {
document.getElementById("Apple").checked = true;
}
400 Views
