在兩種不同形式之間進行選擇

我想要構建這樣的內容：在開始時只有兩個單選按鈕的空白頁面。比方說在兩種不同形式之間進行選擇

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

但在一開始我不想告訴他們！只有當用戶選擇一個單選按鈕。如果用戶去「一」，然後顯示form1，如果用戶在「兩」顯示form2。有任何想法嗎？

Ahm還有別的東西。如果用戶在兩種表單之間切換，我可以添加一些「酷」效果嗎？你知道的不僅僅是讓它看不見而且展現出另一個。有更多效果的東西。也許在變化中讓這個人慢慢隱形起來，然後慢慢地出現另一個呢？一些CSS3選項呢？謝謝

來源

2011-12-21 OverStack

你聽說過[jQuery的]（http://jquery.com/）？無論如何，這需要javascript。也許這可能與hacky，脆弱的CSS有關，但最好的選擇是使用js。 – 2011-12-21 15:55:58

沒有新的。我可以解決這個問題只是用HTML/CSS沒有任何其他庫？我認爲css3和html5是非常「強大」，並得到了一切的解決方案。 – OverStack 2011-12-21 15:57:26

我不認爲你可以只用CSS做這個 – 2011-12-21 15:58:36

對於初學者來說，隱藏的一種形式與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

你明白這是如何工作還是需要一些解釋？

來源

2011-12-21 15:59:41

將代碼編輯爲您的示例，並且使其成爲有效的xHTML，因爲您錯過了結束標記和引號 – 2011-12-21 16:07:36

我想我明白了。太棒了，謝謝。 – OverStack 2011-12-21 16:08:34

那麼你能接受它作爲答案嗎？謝謝。 – 2011-12-21 16:55:08

使用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>

來源

2011-12-21 16:06:08 BrettAdamsGA

在兩種不同形式之間進行選擇

回答

相關問題