链接的动态单选按钮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

回答

相关问题