연결된 동적 라디오 버튼 HTML 자바 스크립트

모두연결된 동적 라디오 버튼 HTML 자바 스크립트

이 사이트를 몇 차례 전에 사용 했으므로 몇 가지 훌륭한 답장을 보내 주셨습니다. 라디오 버튼 세트를 원한다. 버튼을 클릭하면 그 아래에 다른 세트가 생기게된다. 그럼 다시, 때 버튼의 두 번째 세트 중 하나를 클릭하면 현재 나는 다음과 같은이 세 번째 등을 얻을 것이다 : 그러니까 기본적으로

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

, 나는 약간의 마법사를 만들려고 노력 해요 - 그래서 뭔가를 그러면 사용자에게 질문을하고이 질문에 따라 다른 질문을 할 것입니다. 서버 쪽 응용 프로그램을 사용하고 싶지 않습니다. 이렇게 간단하게하려고합니다. 그러나 사용자가 두 번째 단추 집합에서 옵션을 선택할 때마다 두 번째 단추 집합이 바뀝니다. 내가 도대체 뭘 잘못하고있는 겁니까?

'예'및 '예'를 다시 선택하여 내 뜻을 확인하십시오. 어떤 도움을 주시면 감사하겠습니다!

조

출처

2011-10-03 user977380

입니다 : 여기

하나의 해결책이다? '파일을 찾을 수 없음'이어야합니다. – david

귀하의 if 문이 잘못된 것입니다. 당신은 몇 번이고 다시 묻습니다 : if (question=="yes") h1.style.display="block"; else h1.style.display="none"; 그리고 두 번째로 true가 아니기 때문에 h1이 숨겨 지도록 설정합니다. '예 2'는 이름의 어떤 종류의

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

출처

2011-10-03 20:56:27

이것은 정확히 내가 원하는 것입니다! 정말 고맙습니다. 나는 Javascript에 아주 익숙해 그래서 잠시 쉬고있다. 절대적으로 완벽한 응답. 많은 감사 – user977380

마틴, 첫 번째 상자에서 예를 클릭 한 다음 두 번째 상자에서 예를 클릭 한 다음 첫 번째 상자로 돌아가서 아니오를 클릭하면 두 번째 응답 상자가 첫 번째 질문 아래에 표시됩니다. 쉽게 고칠 수 있습니까? – user977380

예. 당신은 if를 가지며, 그 조건이 충족된다면 일이 일어납니다. 지금 당신은 단지 물건을 눈에 보이도록 설정 했으므로 다른 물건을 숨기는 행을 추가하기 만하면됩니다. 거의 템플릿 인'if (condition) {hX.style.display = "블록"; hY.style.display = "none";} else {hY.style.display = "block"; hX.style.display = "none ";}'또는 이와 비슷한 것. 조건이 충족되면 일반적으로 당신이 원하는 것을 생각하십시오. 또 다른 접근법은 토우 함수로 나누는 것입니다 (블록이 커지면 좋습니다) –

무선 입력 요소들은 name 속성에 의해 그룹화된다. 다른 라디오 입력 요소 세트에 다른 이름을 지정해야합니다.

시각 예 :

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

은 참조 : https://developer.mozilla.org/en/HTML/Element/input

출처

2011-10-03 20:48:11

연결된 동적 라디오 버튼 HTML 자바 스크립트

답변

관련 문제