链接的动态单选按钮HTML的Javascript [英] Linked Dynamic Radio Buttons HTML Javascript
问题描述
所有，
之前有几次使用这个网站，并有一些伟大的回复，所以希望有人可以再帮。我想了一组单选按钮，这样，当你点击一个按钮 - 你会得到另一组下面。话又说回来，当您单击第二组按钮中的一个，你会得到一个第三等目前我有以下几点：
Have used this site a few times before and had some great replies so hopefully someone can help again. I want a set of radio buttons, so that when you click a button - you get another set below it. Then again, when you click one of the 2nd set of buttons, you'll get a third etc. Currently I have the following:
<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>
所以基本上，我试图做一个小精灵 - 这样的东西，将询问用户的问题，并在此基础上 - 它会问他们另一个。我不想使用服务器端的应用程序，因此我想简单的东西这样的 - 但每当用户从第二组按钮，它去与它替代了第二组按钮的文本选项。我究竟做错了什么？
So basically, i'm trying to make a little wizard - so something that will ask the user a question, and based on this - it will ask them another. I dont want to use server side applications so am trying something simple like this - but whenever the user selects an option from the 2nd set of buttons, the text which goes with it replaces the 2nd set of buttons. What am i doing wrong?
请选择'是'和'是'再明白我的意思。任何帮助将AP preciated！
Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!
乔
推荐答案
您如果说法是错误的。你再问，再这样：如果（问题==是）h1.style.display =块;，如果是不正确的，所以你设置H1要隐藏的第二次
否则h1.style.display =无;
Your if statement is wrong. You ask again and again this: if (question=="yes") h1.style.display="block";
else h1.style.display="none"; and the second time if is not true, so you set the h1 to be hidden.
下面是一个解决办法：
<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>
这篇关于链接的动态单选按钮HTML的Javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
