Toggle visibility of a form field with a checkbox

This example shows how to use a checkbox to toggle the visibility of another form element. This can be useful if you want to hide certain options in a form until the checkbox has been checked.

The Javascript in this example uses a simple function named toggle to switches the display style of a span element to ‘none’ (hidden) or ” (visible). The name of the element is passed as a variable thiselement with the function:

function toggle(thiselement)
     {
     if (document.getElementById(thiselement).style.display=='none' )
        { document.getElementById(thiselement).style.display = ''; }
     else
        { document.getElementById(thiselement).style.display = 'none'; }
     }

And here is the HTML code that displays the form. Note that the checkbox has an onClick even that calls the Javascript function toggle specified above. In the function the element apples is passed, which corresponds to the id of the span. The display style of the span apples is set to none (invisibile) by default. The Javascript function changes this when the checkbox is checked.

 Apples
 » 

   All types
   Granny Smith
   Red Delicious
   Golden Delicious

And here is the end result:

This entry was posted on Monday, January 23rd, 2006 at 8:18 pm CET and is filed under Websites & Tools with tags . You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.