Question

我想构建这样的东西：在启动一个只有两个radiobutton的空白页面。让我们说

<input type="radio" name=myradio value="1">one
<input type="radio" name=myradio value="2">two

还有两种形式

<form name="form1" action="..." method="post">     
    <input.../>
    <input type ="submit"/>
</form>

<form name="form2" action="..." method="post">     
    <input.../>
    <input type ="submit"/>
</form>

但是一开始我不想给他们看！仅当用户选择一个radiobuttons时。如果用户变为“one”，则如果用户在“two”上显示form2则显示form1。有什么想法吗？

啊，还有别的东西。如果用户在两种形式之间进行切换，我可以添加一些“酷”效果吗？你不仅要知道隐形，而且要出现另一个。有更多效果的东西。也许在变化时让一个慢慢看不见，然后慢慢地出现另一个？一些CSS3选项呢？谢谢

Answer 1

对于初学者，请使用style='display:none'

隐藏其中一个表单

然后编写一个脚本切换单选按钮的onChange事件上表单的可见性。我同意jQuery会让这很容易： jQuery toggle div with radio buttons

此外，使用jQuery可以轻松制作那些“酷”效果。

如果没有jQuery，请查看此示例，不是最美妙的方式，而是功能性的：

<script type="text/javascript"> 
function toggle(theform) { 
    document.getElementById("form1").style.display = "none"; 
    document.getElementById("form2").style.display = "none"; 
    document.getElementById(theform).style.display = "block"; 
} 
</script> 

<body>

<form name="form1" id='form1' action="..." method="post" >     
    <input />
    <input type ="submit"/>
</form>

<form name="form2" action="..." method="post" style="display: none;">     
    <input />
    <input type ="submit"/>
</form>


<input type="radio" name="myradio" value="1" onclick="toggle('form1');"/>one
<input type="radio" name="myradio" value="2" onclick="toggle('form2');" />two

你明白这是如何运作的，还是需要一些解释？

Answer 2

使用onclick切换javascript。 onclick将切换可见性。 javascript实际上会执行切换，而style="display: none;"实际上会隐藏它，直到执行切换。

所以例如html

<input type="radio" name=myradio value="1" onclick="toggle_visibility('form1');">one
<input type="radio" name=myradio value="2" onclick="toggle_visibility('form2');">two

<form id="form1" action="..." method="post"  style="display: none;">     
    <input.../>
    <input type ="submit"/>
</form>

<form id="form2" action="..." method="post"  style="display: none;">     
    <input.../>
    <input type ="submit"/>
</form>

和标题中的javascript

 <script type="text/javascript">
        function toggle_visibility(id) {
           var e = document.getElementById(id);
           if(e.style.display == 'block')
              e.style.display = 'none';
           else
              e.style.display = 'block';
        }
</script>

选择两种不同的形式

2 个答案: