鏈接的動態單選按鈕HTML Javascript

已經使用過這個網站幾次之前，並有一些偉大的回覆，所以希望有人可以再次幫助。我想了一組單選按鈕，這樣，當你點擊一個按鈕 - 你會得到另一組下方。再說，當你點擊第二組按鈕中的一個，你會得到一個第三等目前我有以下幾點：

<html> 
<head> 
<title>My Wizard</title> 

    <script language="javascript"> 

    function Display(question) { 
      h1=document.getElementById("yes"); 
      h2=document.getElementById("no"); 
      h3=document.getElementById("dk"); 
      h4=document.getElementById("yes2"); 

       if (question=="yes") h1.style.display="block"; 
        else h1.style.display="none"; 
       if (question=="no") h2.style.display="block"; 
        else h2.style.display="none"; 
       if (question=="dk") h3.style.display="block"; 
        else h3.style.display="none"; 
       if (question=="yes2") h4.style.display="block"; 
        else h4.style.display="none"; 
           } 
    </script> 


</head> 

<body> 

    <hr> 
     <form name="form1"> 
     <p>Do you like the colour blue?</p> 

      <input type="radio" name="type" value="yes" checked 
      onClick="Display('yes');"> 
      Yes 

      <input type="radio" name="type" value="no" 
      onClick="Display('no');"> 
      No 

      <input type="radio" name="type" value="dk" 
      onClick="Display('dk');"> 
      Don't know 

<br> 

<div ID="yes" style="display:none;"> 

    <hr> 
     <p>Do you like the colour red?</p> 

      <input type="radio" name="type" value="yes2" checked 
      onClick="Display('yes2')"> 
      Yes 

      <input type="radio" name="type" value="no2" 
      onClick="Display('no2');"> 
      No 

</div> 

<div ID="yes2" style="display:none"> 
I want this to appear beneath the 2nd set of buttons, not replacing it! 
</div> 

<div ID="no2" style="display:none"> 
test2 
</div> 


<div ID="no" style="display:none"> 
<b>this is my no box:</b> 
<input type="text" name="no" size="25"> 
</div> 

<div ID="dk" style="display:none"> 
<b>dk:</b> 
<input type="text" name="dk" size="15"> 
</div> 

</form> 
</body> 
</html>

所以基本上，我試圖做一個小精靈 - 這樣的東西那會問用戶一個問題，並基於此 - 它會問他們另一個問題。我不想使用服務器端應用程序，以便在嘗試一些簡單的像這樣 - 但只要用戶選擇從第2組按鈕，它去與它取代了第二組按鈕的文本選項。我究竟做錯了什麼？

請選擇「是」和「是」再明白我的意思。任何幫助將不勝感激！

喬

來源

2011-10-03 user977380

一個什麼樣的名字是 'YES2'？它應該是'文件未找到'。 – david

你if說法是錯誤的。你一次又一次地問這樣：if (question=="yes") h1.style.display="block"; else h1.style.display="none";，如果第二次是不正確的，那麼您將H1被隱藏。

這裏是一個解決方案：

<html> 
<head> 
<title>My Wizard</title> 

<script language="javascript"> 

function Display(question, i) { 
     h1=document.getElementById("yes"); 
     h2=document.getElementById("no"); 
     h3=document.getElementById("dk"); 
     h4=document.getElementById("yes2"); 

     if(i==1){ 
      if (question=="yes") h1.style.display="block"; 
       else h1.style.display="none"; 
      if (question=="no") h2.style.display="block"; 
       else h2.style.display="none"; 
     }else if(i==2){ 
      if (question=="dk") h3.style.display="block"; 
       else h3.style.display="none"; 
      if (question=="yes2") h4.style.display="block"; 
       else h4.style.display="none"; 
     } 
} 
</script> 


</head> 

<body> 

    <hr> 
    <form name="form1"> 
    <p>Do you like the colour blue?</p> 

     <input type="radio" name="type" value="yes" checked 
     onClick="Display('yes', 1);"> 
     Yes 

     <input type="radio" name="type" value="no" 
     onClick="Display('no', 1);"> 
     No 

     <input type="radio" name="type" value="dk" 
     onClick="Display('dk', 1);"> 
     Don't know 

<br> 

<div ID="yes" style="display:none;"> 

<hr> 
    <p>Do you like the colour red?</p> 

     <input type="radio" name="type" value="yes2" checked 
     onClick="Display('yes2', 2)"> 
     Yes 

     <input type="radio" name="type" value="no2" 
     onClick="Display('no2', 2);"> 
     No 

</div> 

<div ID="yes2" style="display:none"> 
I want this to appear beneath the 2nd set of buttons, not replacing it! 
</div> 

<div ID="no2" style="display:none"> 
test2 
</div> 


<div ID="no" style="display:none"> 
<b>this is my no box:</b> 
<input type="text" name="no" size="25"> 
</div> 

<div ID="dk" style="display:none"> 
<b>dk:</b> 
<input type="text" name="dk" size="15"> 
</div> 

</form> 
</body> 
</html>

來源

2011-10-03 20:56:27

這正是我想要的！非常感謝。我對Javascript非常陌生，所以它需要我一段時間。絕對完美的迴應。非常感謝 – user977380

Martin，如果您在頂部框中單擊是，然後在第二個框中單擊是，然後返回到第一個框並單擊否 - 您會在第一個問題下出現第二個響應框。這很容易解決？ – user977380

是的。你有一個if，如果這個條件滿足，事情就會發生。現在你只需將事物設置爲可見，所以只需添加隱藏其他內容的行即可。幾乎模板'如果（條件）{hX.style.display = 「塊」; hY.style.display = 「無」;}其他{hY.style.display = 「塊」; hX.style.display =「無「;}'或類似的東西。一般情況下只要想到條件得到滿足就想要發生什麼。另一種方法是將其分成兩個功能（如果塊變大，推薦使用） –

無線電輸入元件可以通過name屬性分組。您應該爲其他無線電輸入元素集分配一個不同的名稱。

視覺例如：

[x] name=favColor [ ] name=favRed 
[ ] name=favColor [x] name=favRed 
[ ] name=favColor [ ] name-favRed

參見：https://developer.mozilla.org/en/HTML/Element/input

來源

2011-10-03 20:48:11

鏈接的動態單選按鈕HTML Javascript

回答

相關問題