链接的动态单选按钮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组按钮,它去与它取代了第二组按钮的文本选项。我究竟做错了什么?
请选择“是”和“是”再明白我的意思。任何帮助将不胜感激!
乔
你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>
这正是我想要的!非常感谢。我对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
一个什么样的名字是 'YES2'?它应该是'文件未找到'。 – david