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 −

Live Demo

<!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;
}

Advertisements