HTML | DOM Input Checkbox checked Property

The DOM Input Checkbox Property is used to set or return the checked status of a checkbox field. This property is used to reflect the HTML Checked attribute.

Syntax:

It is used to return the checked property.
```
checkboxObject.checked
```
It is used to set the checked property.
```
checkboxObject.checked = true|false
```

Property Values:

true: It defines that checkbox is in checked state.
false: It specify that the checkbox is not checked. It is false by default.

Return Value: It returns a boolean value which represents that whether the checkbox is checked or not.

Example: This example illustrates how to return the Checkbox Checked Property.

<!DOCTYPE html>  
<html>  
    <head>  
        <title>DOM Input Checkbox Checked Property</title> 
    </head>  
    <body style = "text-align: center;">  
        <h1 style = "color: green;">GeeksforGeeks</h1>  
        <h2>DOM Input Checkbox checked Property</h2>  
        <form >  
            <!-- Below input elements have attribute "checked" -->
            <input type="checkbox" name="check" id="GFG" 
                  value="1" checked>Checked by default<br>  
  
            <input type="checkbox" name="check" value="2"> 
                                Not checked by default<br>  
        </form> <br> 
<button onclick="myGeeks()">Submit</button> 
  <p id="sudo" style="color:green;font-size:20px;"></p> 
        <script> 
function myGeeks() { 
  var g = document.getElementById("GFG").checked; 
  document.getElementById("sudo").innerHTML = g; 
} 
</script> 
    </body>  
</html>                      
                                             

Output:
Before clicking on the button:

After clicking on the button:

Example-2: This example illustrates that how to check and uncheck the checkbox.

<!DOCTYPE html>  
<html>  
    <head>  
        <title>DOM Input Checkbox Checked Property</title> 
    </head>  
    <body style = "text-align: center;">  
        <h1 style = "color: green;">GeeksforGeeks</h1>  
        <h2>DOM Input Checkbox  checked Property</h2>  
        <form >  
            <!-- Below input elements have attribute "checked" -->
            <input type="checkbox" name="check" id="GFG" 
                           value="1">Checked by default<br>  
  
            <input type="checkbox" name="check" value="2"> 
                                 Not checked by default<br>  
        </form> <br> 
     <button onclick="myGeeks()">checkt</button> 
     <button onclick="Geeks()">Uncheck</button> 
    
      <script> 
        function myGeeks() { 
           var g = document.getElementById("GFG").checked = true; 
             } 
        function Geeks() { 
           var w = document.getElementById("GFG").checked = false; 
         } 
  
</script> 
    </body>  
</html>                      
                                             

Output :

Before clicking on the button:

After clicking on the check button:

After clicking on the uncheck button:

Supported Browsers: The browser supported by DOM input Checkbox Checked Property are listed below:

Google Chrome
Internet Explorer
Firefox
Opera
Safari

My Personal Notes

Recommended Posts: