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 off.

Indeterminate Checkbox: Indeterminate is the third state of checkbox, it is in between checked and unchecked Indeterminate state, which can be set with the help of JavaScript. This state can be used to force the user to check or uncheck the checkbox.

Syntax

It return the indeterminate property:

checkboxObject.indeterminate

It set the indeterminate property:

checkboxObject.indeterminate = true|false

Return Values: It returns a Boolean that return true if the checkbox is in an indeterminate state, otherwise it returns false

Property Values: It contains a Boolean value that indicates whether the checkbox has indeterminate state or not.

true: It defines that checkbox is set to indeterminate state.
false: It defines that the checkbox is not in indeterminate state.

Example : Below HTML code illustrates that how to return the Indeterminate Property.

HTML

<!DOCTYPE html>

<html>

<head>

    <title>

        DOM Input Checkbox indeterminate Property

    </title>

</head>

<body style="text-align: center;">

    <h1 style="color:green;">

        GeeksforGeeks

    </h1>

    <h2>DOM Input Checkbox indeterminate 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 

        indeterminate Property -->

    <script>

        function myGeeks() {

            var g = document.getElementById("GFG").indeterminate;

            document.getElementById("sudo").innerHTML = g;

        }

    </script>

</body>

</html>

Output:

Supported Browsers:

Google Chrome
Edge 12 and above
Opera
Apple Safari
Mozilla Firefox

Article Tags :

HTML

Web Technologies

HTML-DOM

HTML-Property