HTML | DOM Input Checkbox value Property - GeeksforGeeks

11 Mar, 2019
The Input Checkbox Value property in HTML DOM is used to set or return the value of the value attribute of an input checkbox field, however the contents of the value attribute does not shown to user. When the form is submitted by the user, the value and the other information sent to the server. But when the checkbox is an unchecked state, therefore, no information will be sent.
Syntax:
It returns the Input Checkbox value property.checkboxObject.value
checkboxObject.value
It is used to set the Input Checkbox value property.checkboxObject.value = text
checkboxObject.value = text
Property Values: It contains single value text which is used to specify the value associated with the input checkbox field.
Return Value: It returns a string value which represent the value of the value attribute of a input checkbox field.
Example 1: This example returns the Input Checkbox value property.
<!DOCTYPE html><html>     <head>         <title>            DOM Input Checkbox value Property        </title>    </head>           <body style = "text-align: center;">               <h1 style = "color:green;">            GeeksforGeeks        </h1>                   <h2>DOM Input Checkbox value 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:30px;"></p>                  <!-- script to return Input Checkbox value Property -->        <script>            function myGeeks() {                var g = document.getElementById("GFG").value;                document.getElementById("sudo").innerHTML = g;            }        </script>    </body> </html>                    
Output:Before clicking on the Button:After clicking on the Button:
Example 2: This example sets the Input Checkbox value property.
<!DOCTYPE html> <html>     <head>         <title>            DOM Input Checkbox value Property        </title>    </head>           <body style = "text-align: center;">               <h1 style = "color: green;">            GeeksforGeeks        </h1>                   <h2>DOM Input Checkbox value 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 to set Input Checkbox value Property -->        <script>            function myGeeks() {                var g = document.getElementById("GFG").value                        ="Geeks";                                          document.getElementById("sudo").innerHTML                        = "The value of the value attribute"                          + " was change to " + g;            }        </script>    </body> </html>                    
Output:Before clicking on the Button:After clicking on the Button:
Supported Browsers: The browser supported by DOM Input Checkbox value 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 ?
Form validation using HTML and JavaScript
Types of CSS (Cascading Style Sheet)
HTML Introduction
REST API (Introduction)
Express.js express.Router() Function
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React