show or hide fields using a checkbox

[TGEAR]

there is one check box and if it is checked, then shows several fields
underneath; otherwise, several fields are hidden. the default is
unchecked.

anyone can share the code for this function?

<table>
<tr><td><input type="checkbox" name="vehicle" value="N" /><td></tr>
<tr><td><input type="text" name="color" value="test" /><td></tr>
<tr><td><input type="text" name="shape" value="test" /><td></tr>
</table>

[Ed Jay]

TGEAR scribed:

>there is one check box and if it is checked, then shows several fields
underneath; otherwise, several fields are hidden. the default is
unchecked.

anyone can share the code for this function?

<table>
<tr><td><input type="checkbox" name="vehicle" value="N" /><td></tr>
<tr><td><input type="text" name="color" value="test" /><td></tr>
<tr><td><input type="text" name="shape" value="test" /><td></tr>
</table>

One method would be to wrap the form input elements in a div and use
javascript to change the CSS display style:

function toggle(what,targetId) {
target = document.getElementById(targetId);
target.style.display = (what.checked)?'':'none';
}
<input type="checkbox" name="vehicle" value="N"
onClick="toggle(this,'divtochange');"/>

<div id="divtochange" style="display:none;">
<input type="text" name="color" value="test" />
<input type="text" name="shape" value="test" />
</div>
--
Ed Jay (remove 'M' to respond by email)

[Bart Lateur]

TGEAR wrote:

>here is one check box and if it is checked, then shows several fields
underneath; otherwise, several fields are hidden. the default is
unchecked.

anyone can share the code for this function?

Personally, I favour the approach of using CSS, with nested containers
with their own classes. Just changing the class (className in
Javascript) of the parent container can completely control what child
elements are visible, based on their class or id.

><table>
<tr><td><input type="checkbox" name="vehicle" value="N" /><td></tr>
<tr><td><input type="text" name="color" value="test" /><td></tr>
<tr><td><input type="text" name="shape" value="test" /><td></tr>
</table>

You can use the onchange or onclick event of one of the checkboxes, and
change the class of the table, for example. The showing/hiding logic is
then completely handled by CSS, while the script logic is reduced to as
little as possible.

I'm just making this up as we go along:

<style type="text/css">
#parentTable.vehicleOn .showOff, #parentTable.vehicleOff .showOn {
display: none;
}
</style>
<table id="parentTable" class="vehicleOff">
<tr><td><input type="checkbox" name="vehicle" value="N"
onclick="document.getElementById('parentTable').cl assName = this.checked
? 'vehicleOn' : 'VehicleOff'"/></td></tr>
<tr class="showOn"><td><input type="text" name="color" value="color
test" /></
td></tr>
<tr class="showOff"><td><input type="text" name="shape" value="shape
test" /></td></tr>
</table>

You can pull the code out of the onclick even and make it a function to
call.

--
Bart.