链接的动态单选按钮 HTML Javascript答案

【问题标题】：Linked Dynamic Radio Buttons HTML Javascript链接的动态单选按钮 HTML Javascript
【发布时间】：2011-11-30 05:19:26
【问题描述】：

全部，

之前使用过这个网站几次，得到了一些很好的回复，希望有人能再次提供帮助。我想要一组单选按钮，这样当你点击一个按钮时 - 你会在它下面得到另一组。再说一次，当您单击第二组按钮中的一个时，您将获得第三组按钮，等等。目前我有以下内容：

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

所以基本上，我正在尝试制作一个小向导——这样会问用户一个问题，并基于此——它会问他们另一个问题。我不想使用服务器端应用程序，所以我正在尝试像这样简单的事情 - 但是每当用户从第二组按钮中选择一个选项时，随之而来的文本就会替换第二组按钮。我做错了什么？

请再次选择“是”和“是”以了解我的意思。任何帮助将不胜感激！

乔

【问题讨论】：

yes2是个什么样的名字？它应该是“找不到文件”。

标签： javascript button dhtml radio

【解决方案1】：

无线电输入元素按其name 属性分组。您应该为其他单选输入元素集分配不同的名称。

视觉示例：

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

另请参阅：https://developer.mozilla.org/en/HTML/Element/input

【讨论】：

【解决方案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 很陌生，所以需要一段时间。不过绝对完美的回应。非常感谢
Martin，如果您在顶部框中单击“是”，然后在第二个框中单击“是”，然后返回第一个框并单击“否” - 您会在第一个问题下方看到第二个响应框。这很容易解决吗？
是的。你有一个如果，如果满足那个条件，事情就会发生。现在您只需将内容设置为可见，因此只需添加一个隐藏其他内容的行。一个几乎模板if(condition){hX.style.display="block";hY.style.display="none";}else{hY.style.display="block";hX.style.display="none";} 或类似的东西。一般来说，如果满足条件，请考虑您想要发生的事情。另一种方法是将其拆分为两个函数（当块变大时推荐）