show or hide fields using a checkbox

T

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>
 
B

Bart Lateur

TGEAR said:
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').className = 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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top