当前位置： 文江博客话题详情

链接动态单选按钮 HTML Javascript

发布于 2024-12-08 01:21:26 字数 2562 浏览 6 评论 0原文

所有，

之前已经使用过该网站几次并得到了一些很好的答复，因此希望有人可以再次提供帮助。我想要一组单选按钮，这样当您单击一个按钮时 - 您会在其下方看到另一组单选按钮。再说一遍，当您单击第二组按钮之一时，您将得到第三组按钮，依此类推。目前我有以下内容：

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

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

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

乔

原文

All,

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?

Please select 'yes' and 'yes' again to see what i mean. Any help will be appreciated!

Joe

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（2）

不知所踪 2024-12-15 01:21:26

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

视觉示例：

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

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

Radio input elements are grouped by their name attribute. You should assign a different name to the other sets of radio input elements.

Visual example:

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

See also: https://developer.mozilla.org/en/HTML/Element/input

回复 原文
Saygoodbye 2024-12-15 01:21:26

您的 if 语句是错误的。你一次又一次地问：if (question=="yes") h1.style.display="block";
else h1.style.display="none"; 第二次 if 不为 true，因此您将 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>

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.

here is one solution:

<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>
回复 原文
~没有更多了~

关于作者

失去的东西太少

暂无简介

文章
评论
26 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

alipaysp_snBf0MSZIv

文章 0 评论 0

梦断已成空

文章 0 评论 0

瞎闹

文章 0 评论 0

凯凯我们等你回来

文章 0 评论 0

寄意

文章 0 评论 0

似梦非梦

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文