在单选按钮选择上显示或隐藏表单

时间：2015-03-25 15:00:30

标签： javascript html forms

我正在处理一个问答网站，有些事情让我很烦恼。 我有一个页面，考生可以根据他们主修的科目尝试考试 因此，当候选人选择一个主题时，形式（问题所在的）应该是可见的，所有其他形式都应该被隐藏（我在一个页面中有多个表格）。此部分应该是该表单的大小（就像我使用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>

但它似乎不起作用，我真的很困惑。

3 个答案:

答案 0 :(得分：1)

您正在使用getElementById（）函数，而您没有id属性。 将name属性更改为id

还要确保所有单选按钮的名称属性具有相同的值。如果没有，您将能够选择多个单选按钮，这不是单选按钮的预期用途

答案 1 :(得分：0)

将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

Live demo

答案 2 :(得分：0)

演示链接http://jsfiddle.net/dmxecnu8/

JSCODE 

<script>$('.subject').click(function(){
            $('.form').hide()
            var selectedForm = "." + $(this).val()
            $(selectedForm).show()

        }) </script>

HTML CODE 

<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/

相关问题
最新问题