HTML | DOM Input Checkbox checked Property - GeeksforGeeks

08 Mar, 2019
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
checkboxObject.checked
It is used to set the checked property.checkboxObject.checked = true|false
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
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
HTML-DOM
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to Insert Form Data into Database using PHP ?
REST API (Introduction)
Types of CSS (Cascading Style Sheet)
Form validation using HTML and JavaScript
Design a web page using HTML and CSS
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Top 10 Angular Libraries For Web Developers
Convert a string to an integer in JavaScript