我正在开发一个问答网站，但有一些事情让我感到困扰。
我有一个页面，考生可以根据自己主修的科目尝试进行测试。
因此，当候选人选择一个主题时，表格(其中有问题)应该是可见的，而所有其他表格应该是隐藏的(我在一页中有多个表格)。此部分应该是该表单的大小(就像我使用 iframe 一样，我注意到即使保持一个表单可见，该页面仍然会消耗空间，就好像所有其他表单都可见一样)。
默认情况下，我有一个 div block ，其中包含一些内容。
这是我的代码:
<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
还要确保所有单选按钮的名称属性具有相同的值。如果没有，您将能够选择多个单选按钮，这不是单选按钮的预期目的
关于javascript - 在单选按钮选择上显示或隐藏表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29259235/