Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

HTML | DOM Input Radio checked Property

  • Difficulty Level : Basic
  • Last Updated : 17 Oct, 2019

The DOM Input Radio checked Property in HTML DOM is used to set or return the checked state of an Input Radio Button. This Property is used to reflect the HTML checked attribute.

Syntax:

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

  • It returns the checked property.
    radioObject.checked
  • It is used to set the checked property:
    radioObject.checked = true|false

Property Values:

  • true: It specifies that a radio button is checked.
  • false: It has a Default Value. It specify that the radio button is not checked.

Return value: It returns a Boolean value which represents that the radio button is checked or not.



Example-1: This Example illustrates how to return the Property.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>
      GeeksforGeeks
  </h1>
  
    <h2>
      HTML DOM Input Radio Checked Property
  </h2>
  
    <form id="myGeeks">
        Radio Button:
        <input type="radio" 
               checked=true 
               id="radioID" 
               value="Geeks_radio"
               name="Geek_radio" 
               disabled>
        <br>
        <br>
    </form>
    <button onclick="GFG()">
        Click!
    </button>
    <p id="GFG" 
       style="font-size:25px;
              color:green;">
  </p>
    <script>
        function GFG() {
  
            // Accessing input element 
            // type="radio" 
            var x =
                document.getElementById(
                  "radioID").defaultChecked;
            
            document.getElementById(
              "GFG").innerHTML = x;
        }
    </script>
  
</body>
  
</html>

Output:
Before Clicking On Button:

After Clicking On Button:

Example-2: This Example illustrates how to set the Property.




<!DOCTYPE html>
<html>
  
<head>
    <style>
        body {
            text-align: center;
        }
          
        h1 {
            color: green;
        }
    </style>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <h2>HTML DOM Input Radio  Checked Property</h2>
  
    <form id="myGeeks">
        Radio Button:
        <input type="radio"
               id="radioID" 
               value="Geeks_radio" 
               name="Geek_radio" 
               checked>
        <br>
        <br>
    </form>
    <button onclick="GFG()">
        check
    </button>
    <button onclick="uncheck()">
        uncheck
    </button>
    <p id="GFG" 
       style="font-size:25px;
              color:green;">
  </p>
    <script>
        function GFG() {
  
            // Accessing input element 
            // type="radio" 
            document.getElementById(
              "radioID").checked = "true";
        }
  
        function uncheck() {
            document.getElementById(
              "radioID").checked = false;
        }
    </script>
  
</body>
  
</html>

Output:
Before Clicking On check Button:

After Clicking On check Button:

After Clicking On uncheck button:

Supported Browsers: The browser supported by DOM input Radio checked property are listed below:

  • Google Chrome
  • Internet Explorer 10.0 +
  • Firefox
  • Opera
  • Safari



My Personal Notes arrow_drop_up
Recommended Articles
Page :