Skip to content
Related Articles

Related Articles

HTML | DOM Input Radio Object
  • Last Updated : 19 Feb, 2019

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:

ValueDescription
autofocusIt states if a radio button should automatically get focus when the page loads.
checkedIt returns the checked state of a radio button.
defaultCheckedIt returns the default value of the checked attribute.
defaultValueIt returns the default value of a radio button.
disabledIt returns if the radio button is disabled, or not.
formIt returns a reference to the form that contains the radio button.
nameIt returns the value of the name attribute of a radio button.
requiredIt returns if the radio button must be checked before submitting a form.
typeIt returns which type of form element the radio button is.
valueIt returns the value of the value attribute of the radio button.

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




<!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”.




<!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
  • Safari
  • Opera
My Personal Notes arrow_drop_up
Recommended Articles
Page :