Javascript to show or hide rows when a checkbox is selected

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

LVL 1
Mitch SwetskyBusiness AnalystAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

jmanGJHS97Commented:
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
jmanGJHS97Commented:
sorry this was posted a million times.  the page freaked out when I submitted the comment.  dunno how it happened.
0
GreatGermCommented:
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

jmanGJHS97Commented:
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
GreatGermCommented:
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
jmanGJHS97Commented:
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
jmanGJHS97Commented:
why the heck does it keep doing that?  that is so annoying!
0
Mitch SwetskyBusiness AnalystAuthor Commented:
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
Mitch SwetskyBusiness AnalystAuthor Commented:
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
GreatGermCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jmanGJHS97Commented:
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
jmanGJHS97Commented:
Here's a good description of block vs. inline.

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

0
Mitch SwetskyBusiness AnalystAuthor Commented:
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
Mitch SwetskyBusiness AnalystAuthor Commented:
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
GreatGermCommented:
Sure, just to clarify, you have a footer row that's after all the entries you want to use that's not hidden?
0
Mitch SwetskyBusiness AnalystAuthor Commented:
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
GreatGermCommented:
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
Mitch SwetskyBusiness AnalystAuthor Commented:
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
GreatGermCommented:
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
jmanGJHS97Commented:
Yeah, I am.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
VB Script

From novice to tech pro — start learning today.