Open In App

HTML DOM Input Checkbox value Property

Last Updated : 12 Mar, 2024
Improve
Improve
Like Article
Like
Save
Share
Report

HTML DOM Input Checkbox Value property sets 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.

It manages their assigned value, reflecting their state when checked or unchecked. It retrieves or sets the value attribute, determining the data passed when the form is submitted, and indicating the checkbox’s selection status.

Syntax:

  • It returns the Input Checkbox value property.
checkboxObject.value
  • It is used to set the Input Checkbox value property.
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 that represents the value of the value attribute of a input checkbox field.

Input Checkbox value Property Examples

Example: This example returns the Input Checkbox value property. 

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Input Checkbox value Property
    </title>
</head>

<body style="text-align: center">
    <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"></p>

    <!-- script to return Input Checkbox value Property -->
    <script>
        function myGeeks() {
            let g = document
                .getElementById("GFG").value;
            document.getElementById("sudo")
              .innerHTML = "Checkbox value:" + g;
        }
    </script>
</body>

</html>

Output: 

HTML-checkbox-input-value

HTML DOM Input Check box value

Explanation:

  • In the above example Two checkbox inputs are defined within a form. One is checked by default (value=”1″), while the other remains unchecked (value=”2″).
  • A button labeled “Submit” triggers the myGeeks() function upon clicking.
  • The myGeeks() function retrieves the value of the checked checkbox with the id “GFG”.

Example 2: This example sets the Input Checkbox value property. 

HTML
<!DOCTYPE html>
<html>

<head>
    <title>
        DOM Input Checkbox value Property
    </title>
</head>

<body style="text-align: center;">
    <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() {
            let g = document.getElementById("GFG").value
                = "Geeks";
            document.getElementById("sudo").innerHTML
                = "The value of the value attribute"
                + " was change to " + g;
        } 
    </script>
</body>

</html>

Output: 

HTML-DOM-input-checkbox-value-

HTML DOM input check box value example

Explanation:

  • Here Two checkboxes are defined, with one checked by default and the other unchecked.
  • A button labeled “Submit” triggers the myGeeks() function upon click.
  • The function modifies the value property of the checkbox with id “GFG” to “Geeks” and updates the paragraph element’s content to reflect the change.

HTML DOM Input Checkbox value Property Use Cases

1. How to add a checkbox in forms using HTML ?

To add a checkbox in forms using HTML, utilize the <input> tag with type=”checkbox”, specifying a name attribute for data identification and optional attributes like value and checked.

2. How to Specify the Value of a Checkbox using Attribute ?

To specify the value of a checkbox using attribute in HTML, add the value attribute within the <input> tag, setting it to the desired value for form submission or data processing.

3. How to get all checked values of checkbox in JavaScript ?

To retrieve all checked values of checkboxes in JavaScript, select the checkboxes using querySelectorAll(), iterate through them, and check if they are checked using the checked property.

Supported Browsers

The browser supported by DOM Input Checkbox value property are listed below:


Similar Reads

HTML | DOM Input Checkbox disabled Property
The Input Checkbox disabled property in HTML DOM is used to set or return whether the Input Checkbox field must be disabled or not. A disabled checkbox is unclickable and unusable. It is a boolean attribute and used to reflect the HTML Disabled attribute. Syntax: It returns the Input Checkbox disabled property. checkboxObject.disabled It is used to
2 min read
HTML DOM Input Checkbox indeterminate Property
The input checkbox indeterminate property in HTML DOM is used to set or return whether the state of a checkbox has been changed or not. Basically, the checkbox has three state - true: It represent that status of checkbox is on.false: It indicates that checkbox status is unchecked or off.indeterminate: It represent that checkbox is neither on or not
2 min read
HTML | DOM Input Checkbox autofocus Property
The DOM Input Checkbox Property is used to set or return whether the element should get focus when the page loads. This property is used to reflect the HTML autofocus attribute.Syntax: It is used to return the autofocus property. checkboxObject.autofocusIt is used to set the autofocus property. checkboxObject.autofocus = true|false Property value:
2 min read
HTML | DOM Input Checkbox name Property
The Input Checkbox name property in HTML DOM is used to set or return the value of name attribute of a input checkbox field. The name attribute is required for each input field. If the name attribute is not specified in an input field then the data of that field would not be sent at all. Syntax: It returns the Input Checkbox name property. checkbox
2 min read
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.checkedIt is used to set the checked property.checkboxObject.checked = true|false Property Values: true: It defines that checkb
2 min read
HTML | DOM Input Checkbox type Property
The Input Checkbox type Property in HTML DOM is used to return that which type of form element the checkbox is. For a checkbox input field, this Property was always return only "checkbox". Syntax: checkboxObject.type Return Value: It returns a string value which represents the type of form element the checkbox. Example: This example returns the Inp
1 min read
HTML | DOM Input Checkbox form Property
The Input Checkbox form property in HTML DOM is used to return the reference of form containing the input Checkbox field. It is read only property that returns the form object on success. Syntax: checkboxObject.form Return Values: It returns a string value which specify the reference of the form containing the Input checkbox field. Example: This ex
1 min read
HTML | DOM Input Checkbox defaultValue Property
The DOM Input Checkbox defaultValue Property is used to set or returns the default value of an Input Checkbox field. This property is used to reflect the HTML value attribute. The main difference between the default value and value is that the default value indicates the default value and the value contains the current value after making some chang
2 min read
HTML DOM Input Checkbox defaultChecked Property
The HTML defaultChecked property is used to return the default value of the checked attribute. It has a boolean value that returns true if the checkbox is checked by default, otherwise returns false. Syntax: checkboxObject.defaultCheckedReturn Values: It returns a Boolean value that returns true if the checkbox is checked by default otherwise retur
1 min read
HTML DOM Input Checkbox required Property
The Input Checkbox required property in HTML DOM is used to set or return whether the input checkbox field should be checked or not before submitting the form. This property is used to reflect the HTML-required attribute. Syntax:It returns the Input Checkbox required property.checkboxObject.required It is used to set the Input Checkbox required pro
2 min read
Article Tags :