Связанные кнопки динамического радио HTML Javascript - PullRequest
Новая
       8

Связанные кнопки динамического радио HTML Javascript

0 голосов
/ 04 октября 2011

All

Пользовался этим сайтом несколько раз и получил несколько хороших ответов, так что, надеюсь, кто-то может помочь снова. Мне нужен набор переключателей, чтобы при нажатии на кнопку - под ней находился другой набор. Опять же, когда вы нажмете одну из 2-го набора кнопок, вы получите третью и т. Д. В настоящее время у меня есть следующее: 

<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-го набора кнопок, текст, который идет вместе с ним, заменяет 2-й набор кнопок. Что я делаю не так?

Пожалуйста, выберите «да» и «да» еще раз, чтобы понять, что я имею в виду. Любая помощь будет оценена!

Джо

Ответы [ 2 ]

1 голос
/ 04 октября 2011

Элементы радиовхода сгруппированы по их атрибуту name.Вам следует присвоить другое имя другим наборам элементов радиовхода.

Визуальный пример: 

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

См. Также: https://developer.mozilla.org/en/HTML/Element/input

0 голосов
/ 04 октября 2011

Ваше 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>
...