Javascript Checkbox Visible True/False

Updated on 23 Mar 2012,
Published on 07 Apr 2008

In Javascript, HTML DOM can be used to control visibility of HTML document elements. To control the HTML element visible property style, DOM style is used to modify the colors, backgrounds, positioning, borders etc.

To control the visibility of HTML elements DOM style property visibility is used that can be controlled by 3 values.

JavaScript DOM Examples:

You can see the live samples and examples of JavaScript DOM from the following links:

Javascript Syntax

document.getElementById('OBJECT NAME').style.visibility

Three values for visibility property are:

1. visible

Displays the HTML element.

2. hidden

Hides the HTML element but it leaves the blank space at its position.

3. collapse

It also hides the HTML element.

Collapse value works different for tables/div layout. The space of invisible row or div layer is used by the next HTML element row/column/div.

If collapse is used for textboxes or other form elements then it works like hidden value.

Javascript example code for checkbox controlling the visibility of HTML element:

<html>
<head>
    <title>Javascript Checkbox Visibility</title>
    
    <script type="text/javascript">
    <![CDATA[
        function showHide() {
            if (document.getElementById('Checkbox1').checked) {
                document.getElementById('Text1').style.visibility = 'visible';
            }
            else {
                document.getElementById('Text1').style.visibility = 'hidden';
            }
        }
    ]]>
    </script>

</head>
<body>

    <p>
        Check mark the checkbox to set the visiblity property of textbox.
        It will allow you to show/hide the textbox control dynamically.
    </p>
    
    <p>
        <input id="Checkbox1" 
                type="checkbox" 
                onclick="showHide();" 
                checked="checked" />

        <label for="Checkbox1">Show/Hide</label>
        <br /><br />
        <input id="Text1" type="text" /> 
    </p>

</body>
</html>

Above example shows the code to control the visibility of textbox by click event of checkbox. When user checks the checkbox it sets the visibility = 'hidden' of the textbox, and when user unchecks the checkbox it sets the visibility = 'visible' of the textbox.

Output:

You can see the output of above discussed codes from the following link:

Checkbox Visible True/False

Continue to next tutorial: Javascript Change Style Class of Div tag to learn how to change the CSS class name of the Div tag dynamically.

Previous Tutorial

Next Tutorial