如何使用单选按钮隐藏html项目

时间：2015-07-02 01:11:58

标签： javascript html css

这是一个初学的html / css / javascript问题。我一直在靠墙打我的头，但仍然无法弄清楚这一点。我有一个简单的网页表单，用户填写（名称，电子邮件等），它应该工作的方式是，当用户点击“是”的单选按钮时，他们会看到一个带有一定数量项目的下拉菜单当他们点击“否”时，他们会看到一个文本字段。我有这个部分正常工作，但我希望下拉菜单和文本字段开始隐藏，然后单击是或否单选按钮时出现。我已经尝试了style = display:hidden;但是当我使用它时，文本和下拉菜单将不再出现。

非常感谢您的回答！

这是我正在使用的代码：

<tr align="left" valign="middle">
  <td colspan="1" rowspan="1">
    <p>&nbsp;</p>
  </td>
  <td colspan="1" rowspan="1">
    <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
  </td>
  <td colspan="1" rowspan="1">
    <p>Do you own a Zaxwerks product?</p>
  </td>
  <td colspan="1" rowspan="1">
    <p><input id="customer" name="STATUS" onclick="javascript: test();" type="radio" value="Existing Customer" /> Yes<br />
    <input id="demo" name="STATUS" onclick="javascript: test();" type="radio" value="Downloaded Demo" /> No</p>
  </td>
  <script type="text/javascript"> 
    function test() {
      if (document.getElementById('customer').checked) {
        //Show
        document.getElementById('show_customer').style.display = 'block';
        document.getElementById('show_customer2').style.display = 'block';
        document.getElementById('show_customer3').style.display = 'block';
        document.getElementById('show_customer4').style.display = 'block';

        //Hide
        document.getElementById('show_demo').style.display = 'none';
        document.getElementById('show_demo2').style.display = 'none';
        document.getElementById('show_demo3').style.display = 'none';
      } else {
        //Show
        document.getElementById('show_demo').style.display = 'block';
        document.getElementById('show_demo2').style.display = 'block';
        document.getElementById('show_demo3').style.display = 'block';

        //Hide
        document.getElementById('show_customer').style.display = 'none';
        document.getElementById('show_customer2').style.display = 'none';
        document.getElementById('show_customer3').style.display = 'none';
        document.getElementById('show_customer4').style.display = 'none';
      }
    }
  </script>
  <td>&nbsp;</td>
</tr>
<tr>
  <td colspan="1" rowspan="1" style="display: none;">
    <p>&nbsp;</p>
  </td>
  <td colspan="1" rowspan="1" style="display: none;">
    <div id="show_customer">
      <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
    </div>

    <div id="show_demo" style="display: none;">
      <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
    </div>
  </td>
  <td colspan="1" rowspan="1" style="display: none;">
    <div id="show_customer2">
      <p>Product Owned:</p>
    </div>

    <div id="show_demo2" >
      <p>Where did you hear about us?:</p>
    </div>
  </td>
<!--This is where the user selects which product they own. (In the following code: value equals "what appears in the log file" what appears in the site menu)-->
  <td colspan="1" rowspan="1">
    <div id="show_customer3" style="display: none;">
      <p><select id="WHAT" name="WHAT" size="1">
        <option selected="selected" value="">Select One</option>
        <option value="Item 1">Item 1</option>
        <option value="Item 2">Item 2</option>
        <option value="Item 3">Item 3</option>
        <option value="Item 4">Item 4</option>
        <option value="Item 5">Item 5</option>
        <option value="Item 6">Item 6</option>
        <option value="Item 7">Item 8</option>
        <option value="Item 9">Item 9</option>
        <option value="Item 10">Item 10</option>
        <option value="Item 11">Item 11</option>
        <option value="Item 12">Item 12</option>
      </select></p>
    </div>

    <div id="show_demo3" style="display: none;">
      <p>
        <input maxlength="64" name="WHERE" size="30" type="text" value="" />
      </p>
    </div>
  </td>
  <td>&nbsp;</td>
</tr>

2 个答案:

答案 0 :(得分：0)

使用您在代码中其他位置使用的display:none。特别是这些行

<div id="show_customer2" style="display: none;">
  <p>Product Owned:</p>
</div>

<div id="show_demo2" style="display: none;">
  <p>Where did you hear about us?:</p>
</div>

这是一个有效的例子：

<tr align="left" valign="middle">
  <td colspan="1" rowspan="1">
    <p>&nbsp;</p>
  </td>
  <td colspan="1" rowspan="1">
    <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
  </td>
  <td colspan="1" rowspan="1">
    <p>Do you own a Zaxwerks product?</p>
  </td>
  <td colspan="1" rowspan="1">
    <p><input id="customer" name="STATUS" onclick="javascript: test();" type="radio" value="Existing Customer" /> Yes<br />
    <input id="demo" name="STATUS" onclick="javascript: test();" type="radio" value="Downloaded Demo" /> No</p>
  </td>
  <script type="text/javascript"> 
    function test() {
      if (document.getElementById('customer').checked) {
        //Show
        document.getElementById('show_customer').style.display = 'block';
        document.getElementById('show_customer2').style.display = 'block';
        document.getElementById('show_customer3').style.display = 'block';
        document.getElementById('show_customer4').style.display = 'block';

        //Hide
        document.getElementById('show_demo').style.display = 'none';
        document.getElementById('show_demo2').style.display = 'none';
        document.getElementById('show_demo3').style.display = 'none';
      } else {
        //Show
        document.getElementById('show_demo').style.display = 'block';
        document.getElementById('show_demo2').style.display = 'block';
        document.getElementById('show_demo3').style.display = 'block';

        //Hide
        document.getElementById('show_customer').style.display = 'none';
        document.getElementById('show_customer2').style.display = 'none';
        document.getElementById('show_customer3').style.display = 'none';
        document.getElementById('show_customer4').style.display = 'none';
      }
    }
  </script>
  <td>&nbsp;</td>
</tr>
<tr>
  <td colspan="1" rowspan="1" style="display: none;">
    <p>&nbsp;</p>
  </td>
  <td colspan="1" rowspan="1" style="display: none;">
    <div id="show_customer">
      <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
    </div>

    <div id="show_demo" style="display: none;">
      <p><b><font color="#cc0000" face="Georgia, Times New Roman, Times, serif" size="+2">*</font></b></p>
    </div>
  </td>
  <td colspan="1" rowspan="1" style="display: none;">
    <div id="show_customer2" style="display: none;">
      <p>Product Owned:</p>
    </div>

    <div id="show_demo2" style="display: none;">
      <p>Where did you hear about us?:</p>
    </div>
  </td>
<!--This is where the user selects which product they own. (In the following code: value equals "what appears in the log file" what appears in the site menu)-->
  <td colspan="1" rowspan="1">
    <div id="show_customer3" style="display: none;">
      <p><select id="WHAT" name="WHAT" size="1">
        <option selected="selected" value="">Select One</option>
        <option value="Item 1">Item 1</option>
        <option value="Item 2">Item 2</option>
        <option value="Item 3">Item 3</option>
        <option value="Item 4">Item 4</option>
        <option value="Item 5">Item 5</option>
        <option value="Item 6">Item 6</option>
      </select></p>
    </div>

    <div id="show_demo3" style="display: none;">
      <p>
        <input maxlength="64" name="WHERE" size="30" type="text" value="" />
      </p>
    </div>
  </td>
  <td>&nbsp;</td>
</tr>

答案 1 :(得分：0)

如果您愿意重新构建部分信息，可以使用CSS轻松完成：

<style type="text/css">

.customers , .demo{
    display:none;
}
#customer[type="radio"]:checked ~ .customers{
   display:block;
}
#demo[type="radio"]:checked ~ .demo{
   display:block;
}


</style>


<table>
<tr>
<td>
    <input id="customer" name="STATUS" type="radio" value="Existing Customer" /> Yes
    <input id="demo" name="STATUS" type="radio" value="Downloaded Demo" /> No
   <div class="customers">
      <p>Product Owned:</p>
    </div>

    <div class="demo">
      <p>Where did you hear about us?:</p>
    </div>      



</td>
</tr>
</table>
相关问题
最新问题