hide form field when form check box is checked.

I added an ID to the label and the onclick attribute.

Should be what you wanted.

<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" id="parent" 
      onclick="document.getElementById('parent_label').style.display = (this.checked)?'none':''"/>
      Is Parent</label>
  </p>
  <p>
    <label id="parent_label" >Select Parent:
      <select name="parent_id" id="parent_id">
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </p>
  <p>
    <label>Account Number:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

Select allOpen in new window

which menu field?? there is no field named "menu" there.... anyway, If I got it right you want to hide the <select> element... so here it goes...

    <script type="text/javascript">
    function setVisible() {
      if (document.getElementById('parent').checked) {
         document.getElementById('menu').style.display='none';
      } else {
         document.getElementById('menu').style.display='block';
      }
    }
    </script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" id="parent" onclick="setVisible();" onkeypress="this.onclick();" />
      Is Parent</label>
  </p>
  <div id="menu">
    <label>Select Parent:
      <select name="parent_id" id="parent_id">
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </div>
etc...

Select allOpen in new window

That is basically the approach I would have taken but rather then do the document.getEle... in the actual onClick I woudl ahve called a funtion.  That way you can write something like this:

function hidebox {
if (document.form1.parent[0].checked) {
      document.getElementById('parent_label').style.display = 'none':
         }
then in your onClick you call hidebox

That way you can also add code so that when the box is unchecked the other one comes back

Looks really good. I tried to add it to the actual form I am working in and I could only get it to hide either the label text or the drop down select.

Here is the form I was working in:

<td class="KT_th"><label for="parrent_<?php echo $cnt1; ?>">Is Parent:</label></td>
                      <td><input  <?php if (!(strcmp(KT_escapeAttribute($row_rsaccounts['parrent']),"Y"))) {echo "checked";} ?> type="checkbox" name="parrent_<?php echo $cnt1; ?>" id="parrent_<?php echo $cnt1; ?>" value="Y" onclick="document.getElementById('parent_label').style.display = (this.checked)?'none':''"/>
                      <?php echo $tNGs->displayFieldHint("parrent");?> <?php echo $tNGs->displayFieldError("accounts", "parrent", $cnt1); ?></td>
                    </tr>
                    <tr>
                      <td class="KT_th"><label for="parent_id_<?php echo $cnt1; ?>">Select Parent:</label></td>
                      <td><label id="parent_label"><select name="parent_id_<?php echo $cnt1; ?>" id="parent_id_<?php echo $cnt1; ?>">
                        <option value=""><?php echo NXT_getResource("Select one..."); ?></option>
                        <?php 
do {  
?>
                        <option value="<?php echo $row_parentlist['id']?>"<?php if (!(strcmp($row_parentlist['id'], $row_rsaccounts['parent_id']))) {echo "SELECTED";} ?>><?php echo $row_parentlist['description']?></option>
                        <?php
} while ($row_parentlist = mysql_fetch_assoc($parentlist));
  $rows = mysql_num_rows($parentlist);
  if($rows > 0) {
      mysql_data_seek($parentlist, 0);
	  $row_parentlist = mysql_fetch_assoc($parentlist);
  }
?>
                      </select></label>

Select allOpen in new window

you guys are awesome!

jbrashear72, if you use my solution you will be able to hide/display all the menu, not only the label, or the select

You have multiple objects to deal with... as well as a tr/td.. we need to id the whole thing:

change the onclick to:
onclick="document.getElementById('parent_row_<?php echo $cnt1; ?>').style.display = (this.checked)?'none':''

On the table row th
<tr>
    <td class="KT_th"><label for="parent..........

<tr id="parent_row_<?php echo $cnt1; ?>">
    <td class="KT_th"><label for="parent..........

Yea I would rather hide the table row.

Check that out. Moved the id to the p tag, now it will hide the entire p tag.

Also try using divs rather than p's. p's have a lot of default styling which you have to reset.

    <script type="text/javascript">
    function toggleMenu(checked) {
      if (checked) {
         document.getElementById('menu').style.display='none';
      } else {
         document.getElementById('menu').style.display='';
      }
    }
    </script>
<form id="form1" name="form1" method="post" action="">
  <p>
    <label>
      <input type="checkbox" name="parent" onchange="toggleMenu(this.checked)" id="parent" />
      Is Parent</label>
  </p>
  <p id="menu">
    <label>Select Parent:
      <select>
        <option value="4">Marvel Comics</option>
        <option value="3">DC Comics</option>
        <option value="2">Lost</option>
        <option value="1">Heros</option>
      </select>
    </label>
  </p>
  <p>
    <label>Account Number:
      <input type="text" name="name" id="name" />
    </label>
  </p>
  <p>
    <label>
      <input type="submit" name="submit" id="submit" value="Submit" />
    </label>
  </p>
</form>

Select allOpen in new window

Here is another version (using Jquery)

I used your sample form.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Simple Show Hide Project</title>
            <script language="JavaScript" src="lib/jquery/jquery-1.3.2.min.js">
            </script>
    </head>
    <body>
        <h1>New Web Project Page</h1>
            <form id="form1" name="form1" method="post" action="">
              <p>
          <label>
            <input type="checkbox" name="parent" id="parent"
             onchange="if (this.checked) { $('#parent_sh').show()} else { $('#parent_sh').hide()}" />Is Parent</label>
              </p>
              <p id="parent_sh" style="display:none;">
          <label>Select Parent:
            <select name="parent_id" id="parent_id">
              <option value="4">Marvel Comics</option>
              <option value="3">DC Comics</option>
              <option value="2">Lost</option>
              <option value="1">Heros</option>
            </select>
          </label>
              </p>
              <p>
          <label>Account Number:
                  <input type="text" name="name" id="name" />
          </label>
              </p>
              <p>
          <label>
            <input type="submit" name="submit" id="submit" value="Submit" />
          </label>
              </p>
            </form>
    </body>
</html>

Did you try any of my solutions ?