Open In App

HTML | DOM Input Radio Object

Last Updated : 26 Aug, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

The Input Radio object is used to access or create an input element with type=”radio”. Syntax:

  • To Access input element type=”radio”.
document.getElementById("ID");
  • To create input element type=”radio”.
var GFG = document.createElement("INPUT");
x.setAttribute("type", "radio");

Property Values:

Value Description
autofocus It states if a radio button should automatically get focus when the page loads.
checked It returns the checked state of a radio button.
defaultChecked It returns the default value of the checked attribute.
defaultValue It returns the default value of a radio button.
disabled It returns if the radio button is disabled, or not.
form It returns a reference to the form that contains the radio button.
name It returns the value of the name attribute of a radio button.
required It returns if the radio button must be checked before submitting a form.
type It returns which type of form element the radio button is.
value It returns the value of the value attribute of the radio button.

Example-1: Accessing input object type=”radio” 

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM Input Radio Object</h2>
    <h3>An example access a Radio Button</h3>
          Radio Button:
    <input type="radio"
           checked=true
           id="radioID">
    <p>Click the button to uncheck it.</p>
    <button onclick="GFG()">
      Click!
      </button>
    <script>
        function GFG() {
           
            // Accessing input element
            // type="radio"
            var x =
            document.getElementById("radioID");
            x.checked = false;
        }
    </script>
</body>
</html>


Output: 

Before click:

 

After click:

 

Example-2: Creating input element type=”radio”. 

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
<body>
    <h1>GeeksforGeeks</h1>
    <h2>HTML DOM Input Radio Object
      </h2>
    <p>Click to create a Radio Button.
      </p>
    <button onclick="myFunction()">
      Create
      </button>
    <br>
    <script>
        function myFunction() {
           
            // Creating input element
            // type="radio"
            var x =
            document.createElement("INPUT");
            x.setAttribute("type", "radio");
            document.body.appendChild(x);
        }
    </script>
</body>
</html>


Output:

Before click:

 

After click:

 

Supported Browsers:

  • Google Chrome
  • Mozilla Firefox
  • Edge 12+
  • Safari
  • Opera


Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments

Similar Reads