如何使用单选按钮隐藏html项目
How to hide html items with a radio button
这是一个初级的html/css/javascript问题。我的头一直撞在墙上，但还是想不通。我有一个简单的网络表单，用户可以填写(姓名、电子邮件等(，它的工作方式是，当用户单击一个显示"是"的单选按钮时，他们会看到一个包含一定数量项目的下拉菜单，当他们单击"否"时，他们看到一个文本字段。我让这个部分正常工作，但我希望下拉菜单和文本字段开始隐藏，然后在单击"是"或"否"单选按钮时显示。我尝试过
style = display:hidden;，但当我使用它时，文本和下拉菜单将不再出现。
非常感谢你的回答！
这是我正在使用的代码：
<tr align="left" valign="middle">
<td colspan="1" rowspan="1">
<p> </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> </td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="display: none;">
<p> </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> </td>
</tr>
在代码的其他地方使用相同的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> </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> </td>
</tr>
<tr>
<td colspan="1" rowspan="1" style="display: none;">
<p> </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> </td>
</tr>如果您愿意重组某些信息，可以使用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>
相关文章：
- 如何从 HTML 查询中删除项目
- 使用jQuery插入HTML页面的第一个项目缺少结束标记
- 为非列表项目创建HTML实时搜索
- HTML/JS github页面项目没有't在使用firefox运行时加载图像或声音
- HTML选择，在DOM中选择了正确的选项，但在firefox中显示了错误的项目
- 终于有办法让重构在Eclipse Kepler中的JavaScript、HTML项目中发挥作用了吗
- 为什么这个Javascript没有隐藏HTML项目
- 将 Netbeans Ide 用于不带 Java 的 HTML 项目
- 如何在 iPad 上打开 HTML 项目
- 你如何使用CocoonJS进行HTML项目
- 从 JSON 数据创建 HTML 项目符号列表时出现问题
- 检查屏幕上是否存在html项目
- 如何将对象转换为HTML项目符号列表
- 显示JavaScript/HTML项目的数组
- 添加Javascript/HTML表单功能到'HTML项目'在COGNOS Report Studio
- 如何从网站中提取数据计数器，以便在另一个HTML项目中作为JS变量使用
- 如何在单独的浏览器选项卡中从web应用程序打开第三方HTML项目
- 如何使用单选按钮隐藏html项目
- Libgdx HTML项目未编译(没有可用的源代码..）
- 在HTML项目中分离关注点的最佳实践
