HTML DOM Input Radio defaultChecked Property


The HTML DOM Input Radio defaultChecked property checks whether the radio button has been checked by default or not. It returns true if the radio button is checked otherwise it will return false.

Syntax

Following is the syntax for Radio defaultChecked property −

radioObject.defaultChecked

Example

Let us look at an example of the Radio defaultChecked property −

Live Demo

<!DOCTYPE html>
<html>
<body>
<h1>Input Radio defaultChecked property</h1>
<form>
FRUIT:
<input type="radio" name="fruits" id="Mango" checked>Mango
</form>
<br> <button type=”button” onclick="checkDefault()">CHECK</button>
<p id="Sample"></p>
<script>
   function checkDefault() {
      var c = document.getElementById("Mango").checked;
      document.getElementById("Sample").innerHTML = "The button default checked value is "+c;
   }
</script>
</body>
</html>

Output

This will produce the following output −

On clicking the CHECK button −

In the above example −

We have first created an input element inside a form with type=”radio”, name=”fruits”, id=”Mango” and it has the checked property set to true −

<form>
FRUIT:
<input type="radio" name="fruits" id="Mango" checked>Mango
</form>

We then created a CHECK button that will execute the checkDefault() method when clicked by the user −

<button type=”button” onclick="checkDefault()">CHECK</button>

The checkDefault() method gets the input element with type radio using the getElementById() method. Since the radio button is checked it will return true which we will assign to variable c. The value is then displayed in the paragraph with id “Sample” using its innerHTML property.:

function checkDefault() {
   var c = document.getElementById("Mango").checked;
   document.getElementById("Sample").innerHTML = "The button default checked value is "+c;
}

Updated on: 15-Feb-2021

59 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements