Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


Trying to use Javascript to hide/show several textboxes with checkbox onclick

Trying to use Javascript to hide/show several textboxes with checkbox onclick

Trying to use Javascript to hide/show several textboxes with checkbox onclick

I can Hide/Show the first set of fields but not the second set. I've search the internet to only find several examples of just showing hiding 1 text box. I've used the <div> tag before with the JavaScript toggle to show/hide while developing another site and it works great, but because of the way this site is written I'm restricted, otherwise it will end up being a major rewrite. I'm only making modifications to this site and I'm not familiar with this coding. Maybe someone else is more knowledgeable. I'd appreciate any help I can get. Thanks.


<script language="JavaScript" type="text/javascript">

function toggleShowHide() {
if(document.getElementById("hideMe").style.display == "none")
document.getElementById("hideMe").style.display = "block";
document.getElementById("hideMe").style.display = "none";
if(document.getElementById("showMe").style.display == "block")
document.getElementById("showMe").style.display = "none";
document.getElementById("showMe").style.display = "block";


<td Class="LabelDarkRight"><cf_DB_Label ID="NEXT_VIP" BindTableName="#CURRENT_Table#"></td>

These 2 textboxes, hide or show on check and uncheck of the Change checkbox just below it with the above Function...

<td Class="DataLightLeft" style="display:block" ID="hideMe"><cf_DB_Label ID="hideMe"
BindTableName="#CURRENT_Table#" text="#DS_DATASET.NEXT_VIP #"></td>
<td Class="DataLightLeft" style="display:none" ID="showMe"><cf_DB_TextBox ID="NEXT_VIP "
BindTableName="#CURRENT_Table#" text="#DS_DATASET.NEXT_VIP #" ></cf_DB_TextBox></td>

<td class="LabelDarkRight" ><cf_DB_Label ID="Changed" Text = "Change?"></td>
<td bgcolor="#EEEEEE"><input type="checkbox" ID="Changed" Enabled="true" onClick ="toggleShowHide ()"></td>

<td class="LabelDarkRight"><cf_DB_Label ID="No_MONTHS" Text = "No of Months"></td>

These 2 do not hide/show...

<td class="DataLightLeft" style="display:block" ID="hideMe"><cf_DB_Label ID ="hideMe"
BindTableName="#CURRENT_Table#" text="#DS_DATASET.No_MONTHS#"></td>
<td class="DataLightLeft" style="display:none" ID="ShowMe"><cf_DB_TextBox ID="No_MONTHS"
BindTableName="#CURRENT_Table#" text="#DS_DATASET.No_MONTHS#" ></cf_DB_TextBox></td>

RE: Trying to use Javascript to hide/show several textboxes with checkbox onclick

Just give all the elements you want to 'hide' the same class name and toggle the visibility property or the display property value for that class.

Hint: Elements can have more than one class name, and unlike element IDs, class names are usable with multiple element in the same document


Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

RE: Trying to use Javascript to hide/show several textboxes with checkbox onclick

getElementById will only ever return one singular element: the first one it finds matching the ID you are passing it since IDs must be unique. Your function will only ever toggle the first set.

You can use getElementsByClassName to get a collection of all the elements with a specified class. You would then need to cycle through them collection and apply the display change to each one.


Phil AKA Vacunita
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

Red Flag This Post

Please let us know here why this post is inappropriate. Reasons such as off-topic, duplicates, flames, illegal, vulgar, or students posting their homework.

Red Flag Submitted

Thank you for helping keep Tek-Tips Forums free from inappropriate posts.
The Tek-Tips staff will check this out and take appropriate action.

Reply To This Thread

Posting in the Tek-Tips forums is a member-only feature.

Click Here to join Tek-Tips and talk with other members!

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close