HTML DOM Input Check box Value Property

Posted By Bajarangi soft , Posted On 08-10-2020

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

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 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:orangered;">Bajarangi Soft</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>

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: red;">Bajarangi Soft
</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:red;font-size:20px;"></p>

<!-- Script to set Input Checkbox value Property -->
<script>
    function myGeeks() {
        var g = document.getElementById("GFG").value
            ="bajarangi";

        document.getElementById("sudo").innerHTML
            = "The value of the value attribute"
            + " was change to " + g;
    }
</script>
</body>
</html>