Check a Checkbox to Reveal Content

It happens quite a bit. Someone reading one of the Willmaster Library checkbox control articles uses the "was this article helpful?" box to ask about making certain content available if a certain checkbox is checked.

This article describes how to do it.

When a checkbox is checked, the content of a div is revealed. When the checkbox is unchecked, the content disappears.

There may be multiple checkboxes, each with its own content to reveal.

How it works is that each checkbox is associated with a specific div. JavaScript controls whether or not the div is published. The CSS style of the div associated with the checkbox has display:none; when the checkbox is unchecked. And display:block; when the checkbox is checked.

Here's an example.

Select one or more nature topics: Birds Trees Rivers

When a checkbox is checked, the content of its associated div is revealed. When unchecked, it disappears. When more than one checkbox is checked, the content associated with all checked checkboxes are revealed.

Implementing the Functionality

To implement the example on your web page, copy the example source code and paste it into your test page.

The example code can be modified for your requirements. Or code can be written from scratch.

Here's the example source code. Comments follow.

<!-- The checkboxes. -->
<p>
Select one or more nature topics: 
<input type="checkbox" id="bird" onclick="CheckCheckboxStatus('bird','bird-content')">Birds 
<input type="checkbox" id="tree" onclick="CheckCheckboxStatus('tree','tree-content')">Trees 
<input type="checkbox" id="river" onclick="CheckCheckboxStatus('river','river-content')">Rivers
</p>

<!-- The divs associated with the checkboxes. -->
<div id="bird-content" style="display:none; margin:6pt 0; border:1px solid #999; padding:6pt; border-radius:6pt;">
Birds come in many colors and sizes. Most species can fly. Of those that sing, each species' song is unique.
</div>
<div id="tree-content" style="display:none; margin:6pt 0; border:1px solid #999; padding:6pt; border-radius:6pt;">
Trees are immobile in the sense that they can't move themselves to different locations unassisted. Trees are the largest plant on our planet earth.
</div>
<div id="river-content" style="display:none; margin:6pt 0; border:1px solid #999; padding:6pt; border-radius:6pt;">
Rivers flow. Except where they pool, rivers are always moving. Natural river movement is either downward or being pushed by water from a higher elevation.
</div>

<!-- The JavaScript. -->
<script>
function CheckCheckboxStatus(box,content)
{
   if( document.getElementById(box).checked ) { document.getElementById(content).style.display="block"; }
   else { document.getElementById(content).style.display="none"; }
}
</script>

The code is in three parts:

1. The checkboxes.
2. The divs associated with the checkboxes.
3. The JavaScript.

The parts may be together in the source code or in different locations. For example, the JavaScript might be placed near the bottom of the page. And the checkboxes might be in a different location than the divs to be revealed.

The checkboxes.

When the checkbox is checked or unchecked, the onclick attribute runs the JavaScript function CheckCheckboxStatus.

The parameters for CheckCheckboxStatus are the id value of the checkbox (colored blue in the example code) and the id value of the div associated with the checkbox (colored red).

The divs associated with the checkboxes.

The id values of the divs associated with the checkboxes are colored red in the example code. The id values need to match the id value of the CheckCheckboxStatus function located in the checkbox's onclick attribute (also colored red).

The JavaScript.

The JavaScript is copy and paste. No customization is necessary.

When everything is implemented, test it, of course.

When a checkbox is checked, the content appears. When unchecked, it disappears.

(This article first appeared in Possibilities ezine.)

Will Bontrager