Javascript 如何使用单选按钮隐藏html项目
这是一个初级html/css/javascript问题。我一直把头撞在墙上,但还是想不出来。我有一个用户填写的简单web表单(姓名、电子邮件等),它的工作方式是,当用户单击一个单选按钮说“是”时,他们会看到一个带有设置数量的项目的下拉菜单,当他们单击“否”时,他们会看到一个文本字段。我的这部分工作正常,但我想下拉菜单和文本字段开始隐藏,然后出现时,是或否单选按钮被单击。我试过Javascript 如何使用单选按钮隐藏html项目,javascript,html,css,Javascript,Html,Css,这是一个初级html/css/javascript问题。我一直把头撞在墙上,但还是想不出来。我有一个用户填写的简单web表单(姓名、电子邮件等),它的工作方式是,当用户单击一个单选按钮说“是”时,他们会看到一个带有设置数量的项目的下拉菜单,当他们单击“否”时,他们会看到一个文本字段。我的这部分工作正常,但我想下拉菜单和文本字段开始隐藏,然后出现时,是或否单选按钮被单击。我试过style=display:hidden但是当我使用它时,文本和下拉菜单将不再出现 非常感谢您的回答 这是我正在使用的代码
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>
*
你有Zaxwerks的产品吗
是
没有
功能测试(){
if(document.getElementById('customer')。选中){
//展示
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';
//隐藏
document.getElementById('show_demo')。style.display='none';
document.getElementById('show_demo2')。style.display='none';
document.getElementById('show_demo3')。style.display='none';
}否则{
//展示
document.getElementById('show_demo')。style.display='block';
document.getElementById('show_demo2')。style.display='block';
document.getElementById('show_demo3')。style.display='block';
//隐藏
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';
}
}
*
*
拥有的产品:
你从哪里听说我们的
选择一个
项目1
项目2
项目3
项目4
项目5
项目6
项目8
项目9
项目10
项目11
项目12
使用与代码中其他位置相同的显示:无。特别是这些线
<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>
拥有的产品:
你从哪里听说我们的
以下是一个工作示例:
*
你有Zaxwerks的产品吗
是
没有
功能测试(){
if(document.getElementById('customer')。选中){
//展示
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';
//隐藏
document.getElementById('show_demo')。style.display='none';
document.getElementById('show_demo2')。style.display='none';
document.getElementById('show_demo3')。style.display='none';
}否则{
//展示
document.getElementById('show_demo')。style.display='block';
document.getElementById('show_demo2')。style.display='block';
document.getElementById('show_demo3')。style.display='block';
//隐藏
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';
}
}
*
*
拥有的产品:
你从哪里听说我们的
选择一个
项目1
项目2
项目3
项目4
项目5
项目6
如果您愿意重组某些信息,可以使用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>
.客户,.演示{
显示:无;
}
#客户[type=“radio”]:选中~。客户{
显示:块;
}
#演示[type=“radio”]:选中~演示{
显示:块;
}
对
不
拥有的产品:
你从哪里听说我们的
谢谢您的帮助!这确实会隐藏文本字段和下拉列表,但是,当您单击单选按钮时,文本项不会显示,因此格式设置已关闭。文本项“Product Owned”和“Where you knowed on us?”是否运行了“snipped”(剪下)按钮?文本与相应的文本字段/组合一起出现/消失。哦,真奇怪,你说得对。它在代码片段中工作得很好,但是当我将您的确切代码粘贴到dreamweaver中时,它会弄乱我的所有格式,并且我看不到文本项。奇怪。你建议用什么来代替?