选择单选按钮时显示或隐藏窗体
Showing or Hiding a form(s) on radio button selection
我正在一个问答网站上工作，有一些事情困扰着我。我有一个页面，考生可以尝试根据他们所学的科目进行考试
因此，当候选人选择一个主题时，表格（问题所在的表格）应该是可见的，所有其他表格都应该隐藏（我在一页中有多个表格）。这个部分应该是该表单的大小（就像我使用iframe一样，我注意到即使保持一个表单可见，页面仍然会消耗空间，就像所有其他表单都可见一样）。
默认情况下，我有一个div块，里面有一些内容
这是我的代码：
<html>
<head>
<title>Questions</title>
</head>
<body>
<br /><br />
<input type="radio" name="mathematics" onselect="func(1)" /> Mathematics
<input type="radio" name="physics" onselect="func(2)" /> Physics
<input type="radio" name="chemistry" onselect="func(3)" /> Chemistry
<input type="radio" name="biology" onselect="func(4)" /> Biology
<div id="content">
<p>Some contents</p>
<br /><br /><br />
<hr />
<div>
<form name="first" style="visibility:hidden;>
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. What is the formula for force</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
<form name="second" style="visibility:hidden;>
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. What is the formula for force</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
<form name="third" style="visibility:hidden;>
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. What is the formula for force</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
<form name="fourth" style="visibility:hidden;">
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. What is the formula for force</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
</body>
</html>
我知道这可以用javascript完成，但我不太确定该怎么做，我已经尝试过了：
<script type="text/javascript">
function func(a) {
if(a==1) {
document.getElementById("mathematics").style.display="block";
}
if(a==2) {
document.getElementById("physics").style.display="none";
}
if(a==3) {
document.getElementById("chemistry").style.display="none";
}
if(a==4) {
document.getElementById("biology").style.display="none";
}
}
</script>
但它似乎不起作用，我真的很困惑。
您使用的是getElementById（）函数，而您没有id属性将name属性更改为id
还要确保所有单选按钮的名称属性具有相同的值。如果没有，您将能够选择多个单选按钮，这不是单选按钮
将id分配给表单
<form id='mathematics' name="first" style="display:none;">
<form id='physics' name="second" style="display:none;">
<form id='chemistry' name="third" style="display:none;">
<form id='biology' name="fourth" style="display:none;">
并更改您的javascript以显示/隐藏所选表单。
var d = document;
function $(id) {
return d.getElementById(id);
}
function func(a) {
var
mathDisplay = $("mathematics"),
physDisplay = $("physics"),
chemiDisplay = $("chemistry"),
bioDisplay = $("biology");
(a == 1) ? ( mathDisplay.style.display = "block" ) : ( mathDisplay.style.display = "none" );
(a == 2) ? ( physDisplay.style.display = "block" ) : ( physDisplay.style.display = "none" );
(a == 3) ? ( chemiDisplay.style.display = "block" ) : ( chemiDisplay.style.display = "none" );
(a == 4) ? ( bioDisplay.style.display = "block" ) : ( bioDisplay.style.display = "none" );
}
并为您的收音机设置相同的名称：
<input type="radio" name="radio" onclick="func(1)" />Mathematics
<input type="radio" name="radio" onclick="func(2)" />Physics
<input type="radio" name="radio" onclick="func(3)" />Chemistry
<input type="radio" name="radio" onclick="func(4)" />Biology
实时演示
演示链接http://jsfiddle.net/dmxecnu8/
JSCODE
<script>$('.subject').click(function(){
$('.form').hide()
var selectedForm = "." + $(this).val()
$(selectedForm).show()
}) </script>
HTML代码
<input type="radio" name="type" class="subject" value="first" /> Mathematics
<input type="radio" name="type" class="subject" value="second" /> Physics
<input type="radio" name="type" class="subject" value="third" /> Chemistry
<input type="radio" name="type" class="subject" value="fourth" /> Biology
<div id="content">
<p>Some contents</p>
<br /><br /><br />
<hr />
<div>
<form name="first"class="form first" style="display:none;">
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. Maths</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
<form name="second" class="form second" style="display:none">
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. Physics</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
<form name="third" class="form third" style="display:none">
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. Chemistry</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
<form name="fourth" class="form fourth" style="display:none">
<ul type="none">
<li style="margin-bottom:15px; font-size:20px">1. Biology</li>
<li style="margin-bottom:15px">
<ul type="none">
<li style=" font-size:20px; float:left"><input type="radio" name="q1op"/></li>
<li style="font-size:20px; float:left;" >Option 1</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 2</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; float:left" >Option 3</li>
<li style=" font-size:20px; float:left; margin-left:30px"><input type="radio" name="q1op" /></li>
<li style="font-size:20px; margin-bottom:15px;" >Option 4</li>
</ul>
</li>
</ul>
</form>
我在这里更新了你的代码。这是jsfiddle链接http://jsfiddle.net/dmxecnu8/
相关文章：
- 主干窗体隐藏字段未呈现
- 当屏幕键盘出现在手机中时，窗体会隐藏起来
- 选择单选按钮时显示或隐藏窗体
- 如何隐藏和显示通过窗体填充的表
- 如何从窗体中隐藏选择值
- 访问子窗体的asp代码隐藏中的javascript window.myvariable
- Javascript显示窗体的隐藏变量
- 如何将表行传递到具有所有输入元素的隐藏窗体
- 显示或隐藏窗体元素
- 如何隐藏/取消隐藏窗体
- 如何根据字段名称在SharePoint显示窗体中隐藏字段(jQuery）
- Javascript隐藏Jquery窗体
- 如何在模式隐藏或关闭时重置窗体
- 窗体-通过在select标记中选择一个选项来显示隐藏字段
- django窗体向导.使用Javascript隐藏/显示表单字段
- 优化javascript显示/隐藏单选窗体选项
- 单击按钮时隐藏窗体
- 使用单选框显示和隐藏不同的窗体
- 在依赖于另一个字段选择的窗体中隐藏表的某个部分
- jQuery代码隐藏的窗体
