Solved

Javascript to show or hide rows when a checkbox is selected

Posted on 2009-06-30
22
263 Views
Last Modified: 2012-05-07
I have a section of an asp page with part of a table that needs to be dynamicly displayed.
If the checkbox ( chPrePost) is selected I do not want PP1-4 shown.
The code below does this  but when check box is deselected I want it shown again.
I need some help with a way to toggle the get element depending on checkbox checked or not.
I am a beginner in javascript and would appreciate any comments along with a potential solution.
<Table Name=PPEquip cellpadding="2" cellspacing="0">

<tr>

<td Colspan=3 bgcolor="#FFFFCC"><b>Pre & Post Finishing Equipment Details - Box to Stacker Only? </b><input type="checkbox" name="chPrePost" value="BoxStack" onclick="document.getElementById('PP1').style.display='none'; document.getElementById('PP2').style.display='none'; document.getElementById('PP3').style.display='none'; document.getElementById('PP4').style.display='none' "></td>

</tr>
 
 

<tr id="PP1" style="display: inline">

<td bgcolor="#FFFFCC" align="center">Make</td>

<td bgcolor="#FFFFCC" align="center">Model</td>

<td bgcolor="#FFFFCC" align="center">Description</td>

</tr>

<tr id="PP2" style="display: inline">

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostMake1" size="20">&nbsp;</td>

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostModel1" size="20">&nbsp;</td>

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

</tr>

<tr id="PP3" style="display: inline">

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostMake2" size="20">&nbsp;</td>

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostModel2" size="20">&nbsp;</td>

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

</tr>

<tr id="PP4" style="display: inline">

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostMake3" size="20">&nbsp;</td>

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostModel3" size="20">&nbsp;</td>

<td bgcolor="#FFFFCC" align="center"><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

</tr>

</table>

Open in new window

0
Comment
Question by:Mswetsky
  • 8
  • 6
  • 6
22 Comments
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
I would use an onBlur event to toggle the rows you want.

Something like this (notice I added an ID to the checkbox as well):
<input type="checkbox" name="chPrePost" id="chPrePost" value="BoxStack" onblur="toggleRows(this.id);" />
 

<script>

function toggleRows(checkboxID)

{

  if (document.getElementById(checkboxID).checked == true)

  {

    document.getElementById('PP1').style.display='block';

    document.getElementById('PP2').style.display='block'; 

    document.getElementById('PP3').style.display='block'; 

    document.getElementById('PP4').style.display='block';

  }

  else

  {

    document.getElementById('PP1').style.display='none';

    document.getElementById('PP2').style.display='none'; 

    document.getElementById('PP3').style.display='none'; 

    document.getElementById('PP4').style.display='none';

  }

}

</script>

Open in new window

0
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
sorry this was posted a million times.  the page freaked out when I submitted the comment.  dunno how it happened.
0
 
LVL 17

Expert Comment

by:GreatGerm
Comment Utility
You seem quite attached to that answer jman.  I'm going to have to disagree though and suggest this (cleaned it up a bit):

<html>

<head>
 

<script type="text/javascript">

function toggleRows(checkBox)

{

  if (checkBox.checked == true)

  {

    document.getElementById('PPEquip').style.display='none';
 

  }

  else

  {

    document.getElementById('PPEquip').style.display='block';
 

  }

}

</script>

<style type="text/css">

#PPEquip{

	border-collapse:collapse;

	background-color:#FFFFCC;

	width:500px;

	text-align:center;

}

#PPEquipSelector{

	font-weight:700;

	background-color:#FFFFCC;

	width:500px;

}

</style>
 

</head>

<body>
 

<div id="PPEquipSelector">Pre & Post Finishing Equipment Details - Box to Stacker Only? <input type="checkbox" name="chPrePost" 
 

value="BoxStack" onclick="toggleRows(this);" /></div>
 

<Table ID="PPEquip">

<tr id="PP1" style="display: inline">

<th>Make</td>

<th>Model</td>

<th>Description</td>

</tr>

<tr id="PP2">

<td><input type="text" name="TxtPrePostMake1" size="20">&nbsp;</td>

<td><input type="text" name="TxtPrePostModel1" size="20">&nbsp;</td>

<td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

</tr>

<tr id="PP3">

<td><input type="text" name="TxtPrePostMake2" size="20">&nbsp;</td>

<td><input type="text" name="TxtPrePostModel2" size="20">&nbsp;</td>

<td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

</tr>

<tr id="PP4">

<td><input type="text" name="TxtPrePostMake3" size="20">&nbsp;</td>

<td><input type="text" name="TxtPrePostModel3" size="20">&nbsp;</td>

<td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

</tr>

</div>

</table>
 

</body>

Open in new window

0
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
Yeah, on occasion, when you submit a comment, the page spins for a while, and you end up with 15 copies of it.

As far as the code goes, wrapping divs and styles around a solution that does what the user asked for doesn't really qualify as a diagreement.  If the goal is to hide the entire table, then, sure, you can do that.  I was trying to address the question as it was written.

Maybe I misunderstood what Mswetsky was asking for, but I don't believe so.
0
 
LVL 17

Expert Comment

by:GreatGerm
Comment Utility
Please reread my code.  I didn't wrap a div around anything preexisting.  I created it separately so the table could work with a single call to clean up the code.  It could easily be done by making it the TH and stepping through the TRs too.  Your example was using an onblur which should have been onclick. Also, you were passing just the id of the checkbox then having to scale through the DOM to find it again rather than just passing it directly.  And finally, your code was doing the opposite of what the asker was wanting.  

So, just a simple disagreement.
0
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
Yup, I stand corrected.  I should have done onClick and turned off the rows when the box is checked.
<input type="checkbox" name="chPrePost" id="chPrePost" value="BoxStack" onClick="toggleRows(this);" />

 

<script>

function toggleRows(checkbox)

{

  if (checkbox.checked == true)

  {

    document.getElementById('PP1').style.display='none';

    document.getElementById('PP2').style.display='none'; 

    document.getElementById('PP3').style.display='none'; 

    document.getElementById('PP4').style.display='none';

  }

  else

  {

    document.getElementById('PP1').style.display='block';

    document.getElementById('PP2').style.display='block'; 

    document.getElementById('PP3').style.display='block'; 

    document.getElementById('PP4').style.display='block';

  }

}

</script>

Open in new window

0
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
why the heck does it keep doing that?  that is so annoying!
0
 
LVL 1

Author Comment

by:Mswetsky
Comment Utility
Thank you both for the solutions and the reasons behind the different methods. I am trying to learn as I go so it helps to understand.

I only posted a small part of the page, The full page is a ridiculous form which actually has over 80 form fields. I tried to lay out many tables so I could structure the page and understand the data groupings.

I am somewhat confused by the Germ Post.
It looks like the Solution has the head in it, does this assume there is only one check box on the page?

My other question of confusion for Jman is with the following statement ( if (checkBox.checked == true) )
Does this work because of where it is put?  since it doesn't call the checkbox name?
0
 
LVL 1

Author Comment

by:Mswetsky
Comment Utility
Finally I am unfamiliar with the differences in Block, Inline or None. Is there an easy explanation?
I've used Inline and None but what's Block??
0
 
LVL 17

Accepted Solution

by:
GreatGerm earned 425 total points
Comment Utility
My post actually assumes there's going to be multiple parts to the form.  I use the head section for the style and script as a standard.  Here I made it even more reusable so you can have something similar whereever you need it.  Just make sure the layout of the table is the same.

<html>

<head>

 

<script type="text/javascript">

function toggleRows(checkBox){

  var tableArray = checkBox.parentNode.parentNode.parentNode.getElementsByTagName('tr');

  var i;

  if (checkBox.checked == true)

  {

    for(i=1;i<tableArray.length;i++){

      tableArray[i].style.display = "none";

    }

  }

  else

  {

    for(i=1;i<tableArray.length;i++){

      tableArray[i].style.display = "block";

    }

  }

}

</script>

<style type="text/css">

#PPEquip{

	border-collapse:collapse;

	background-color:#FFFFCC;

	width:500px;

	text-align:center;

	font-weight:700;

}

</style>

 

</head>

<body>

 

<table ID="PPEquip">

  <tr>

    <th colspan="3">Pre & Post Finishing Equipment Details - Box to Stacker Only? <input type="checkbox" name="chPrePost" value="BoxStack" onclick="toggleRows(this);" /></th>

  </tr>

  <tr>

    <td>Make</td>

    <td>Model</td>

    <td>Description</td>

  </tr>

  <tr>

    <td><input type="text" name="TxtPrePostMake1" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostModel1" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

  </tr>

  <tr>

    <td><input type="text" name="TxtPrePostMake2" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostModel2" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

  </tr>

  <tr>

    <td><input type="text" name="TxtPrePostMake3" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostModel3" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

  </tr>

</table>

 

</body>

Open in new window

0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
No, it works because the function call passes the checkbox object to it, using:

<input type="checkbox" name="chPrePost" id="chPrePost" value="BoxStack" onClick="toggleRows(this);" />

toggleRows(this) sends "itself" to the JS function.  Then, the code knows that "this" is a checkbox, and you can access the checked attribute of that object.  Germ was dead on that this is easier than passing the name of the checkbox and then having the DOM look it up by name.

Make sense?
0
 
LVL 9

Assisted Solution

by:jmanGJHS97
jmanGJHS97 earned 75 total points
Comment Utility
Here's a good description of block vs. inline.

http://www.autisticcuckoo.net/archive.php?id=2005/01/11/block-vs-inline-1

0
 
LVL 1

Author Closing Comment

by:Mswetsky
Comment Utility
Two good guys helped with the solution and understanding, THank you both. Great Germ Included all of the code needed in a fashion easiset to pop in my page where as Jman's code needed to be used in addition to other code and I would need to figure where which parts go. As I mentioned I am unfamiliar with javascript and a beginned HTM code writer.
Thank you both again, Us newbies appreciate your assistance and insight.
0
 
LVL 1

Author Comment

by:Mswetsky
Comment Utility
GreatGerm
After using the code I realize it hides all the tr's in the table
Is there a way to add one more tr that is not hidden?
After the text boxes for Make Model Desc I need a row for comments where there will be another text area used, and that was why I initilly used tr id=
0
 
LVL 17

Expert Comment

by:GreatGerm
Comment Utility
Sure, just to clarify, you have a footer row that's after all the entries you want to use that's not hidden?
0
 
LVL 1

Author Comment

by:Mswetsky
Comment Utility
Yes. A footer row would work fine
Wow,
I have been typing HTM intermittently for 8 years and never knew there was a footer row!
0
 
LVL 17

Expert Comment

by:GreatGerm
Comment Utility
We could switch to the thead/tbody/tfoot method, but some browsers don't like it as much so I'm just going to add another tr and tell the script to ignore the last row.

<html>

<head>

 

<script type="text/javascript">

function toggleRows(checkBox){

  var tableArray = checkBox.parentNode.parentNode.parentNode.getElementsByTagName('tr');

  var i;

  if (checkBox.checked == true)

  {

    for(i=1;i<tableArray.length-1;i++){

      tableArray[i].style.display = "none";

    }

  }

  else

  {

    for(i=1;i<tableArray.length-1;i++){

      tableArray[i].style.display = "block";

    }

  }

}

</script>

<style type="text/css">

#PPEquip{

	border-collapse:collapse;

	background-color:#FFFFCC;

	width:500px;

	text-align:center;

	font-weight:700;

}

</style>

 

</head>

<body>

 

<table ID="PPEquip">

  <tr>

    <th colspan="3">Pre & Post Finishing Equipment Details - Box to Stacker Only? <input type="checkbox" name="chPrePost" value="BoxStack" onclick="toggleRows(this);" /></th>

  </tr>

  <tr>

    <td>Make</td>

    <td>Model</td>

    <td>Description</td>

  </tr>

  <tr>

    <td><input type="text" name="TxtPrePostMake1" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostModel1" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

  </tr>

  <tr>

    <td><input type="text" name="TxtPrePostMake2" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostModel2" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

  </tr>

  <tr>

    <td><input type="text" name="TxtPrePostMake3" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostModel3" size="20">&nbsp;</td>

    <td><input type="text" name="TxtPrePostDesc3" size="25">&nbsp;</td>

  </tr>

  <tr>

    <td colspan="3">This is the footer</td>

  </tr>

</table>

 

</body>

Open in new window

0
 
LVL 1

Author Comment

by:Mswetsky
Comment Utility
Actually I am lucky that this is on an intranet site and all users use IE 6+
Amazing! so what lines in the code above are you counting rows?

Can you suggest how I can become better able to use and create these type tasks?
Is a javascript class/book or an htm class/book or will experience be my only teacher (then I am doomed)?
0
 
LVL 17

Expert Comment

by:GreatGerm
Comment Utility
This line finds the rows: for(i=1;i<tableArray.length-1;i++){

With javascript you start counting at 0 so I told the loop to start at 1 (i=1) which would be the second row. Then I told it to go until it reached 1 before the last row (i<tableArray.length-1) since tableArray holds the rows objects in order for me.

While it's not the end all, or even the middle in some cases, w3schools (http://www.w3schools.com) is a great reference and will help you with a multitude of topics.
0
 
LVL 9

Expert Comment

by:jmanGJHS97
Comment Utility
Yeah, I am.
0

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…

743 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now