javascript와 html을 사용하여 필드를 표시하거나 사라지게하기

일부 라디오 버튼을 만들고 있는데, 그 중 하나를 클릭하면 몇 개의 필드가 나타납니다. 내 문제는 내가 다음 버튼을 클릭하면 사라질 필요가있는 동안 이전의 필드가 화면에 머물러 있다는 것입니다. 이것은 내가 작성한 코드입니다. 제 실패의 이유는 자바 스크립트 함수에서 else 문을 입력하지 않는다는 것입니다. 누군가 나를 도울 수 있습니까? 저는이 두 언어로 신인입니다. 이전 값을 함수에 보내서 else 문과 비교할 수있는 방법이 있습니까? 다른 해결책도 잘 접수 될 것입니다!javascript와 html을 사용하여 필드를 표시하거나 사라지게하기

<HTML> 
<HEAD> <title> Ticket Choice </title></HEAD> 
<BODY> 
<FORM> 
<SCRIPT type="text/javascript"> 
    function IsCheck(but_Check, if_Check){ 
     if (document.getElementById(but_Check).checked) { 
      document.getElementById(if_Check).style.display = 'block'; 
     } 
     else document.getElementById(if_Check).style.display = 'none'; 
    } 
</SCRIPT> 

<input type = "radio" onclick = "javascript:IsCheck(&quot;buttonCheck1&quot;,&quot;ifChecked1&quot;);" name = "plane" id = "buttonCheck1"> PLANE <br> 
    <div id = "ifChecked1" style="display:none"> 
     <label for = "depart">Departure:</label> 
     <input type = "text" id = "depart" name = "depart_plane" maxlength = "200"><br> 
     <label for = "dest">Destination:</label> 
     <input type = "text" id = "dest" name = "destination_plane" maxlength = "200"><br> 
    </div> 

<input type = "radio" onclick = "javascript:IsCheck(&quot;buttonCheck2&quot;,&quot;ifChecked2&quot;);" name = "plane" id = "buttonCheck2"> SHIP <br> 
    <div id = "ifChecked2" style="display:none"> 
     <label for = "depart">Departure:</label> 
     <input type = "text" id = "depart" name = "depart_ship" maxlength = "200"><br> 
     <label for = "dest">Destination:</label> 
     <input type = "text" id = "dest" name = "destination_ship" maxlength = "200"><br> 
    </div> 

<input type = "radio" onclick = "javascript:IsCheck(&quot;buttonCheck3&quot;,&quot;ifChecked3&quot;);" name = "plane" id = "buttonCheck3"> O.S.E <br> 
    <div id = "ifChecked3" style="display:none"> 
     <label for = "depart">Departure:</label> 
     <input type = "text" id = "depart" name = "depart_ose" maxlength = "200"><br> 
     <label for = "dest">Destination:</label> 
     <input type = "text" id = "dest" name = "destination_ose" maxlength = "200"><br> 
    </div> 
</FORM> 
</BODY> 
</HTML>

출처

2014-05-17 Saraki

항상 라디오를 클릭하기 때문에 조건이 else 문에 입력되지 않습니다.

대신,이 시도 :

<input type = "radio" onclick = "IsCheck(1);" name = "plane" id = "buttonCheck1"> PLANE <br> 
<div id = "ifChecked1" style="display:none"> 
    <label for = "depart">Departure:</label> 
    <input type = "text" id = "depart" name = "depart_plane" maxlength = "200"><br> 
    <label for = "dest">Destination:</label> 
    <input type = "text" id = "dest" name = "destination_plane" maxlength = "200"><br> 
</div> 
<input type = "radio" onclick = "IsCheck(2);" name = "plane" id = "buttonCheck2"> SHIP <br> 
<div id = "ifChecked2" style="display:none"> 
    <label for = "depart">Departure:</label> 
    <input type = "text" id = "depart" name = "depart_ship" maxlength = "200"><br> 
    <label for = "dest">Destination:</label> 
    <input type = "text" id = "dest" name = "destination_ship" maxlength = "200"><br> 
</div> 
<input type = "radio" onclick = "IsCheck(3);" name = "plane" id = "buttonCheck3"> O.S.E <br> 
<div id = "ifChecked3" style="display:none"> 
    <label for = "depart">Departure:</label> 
    <input type = "text" id = "depart" name = "depart_ose" maxlength = "200"><br> 
    <label for = "dest">Destination:</label> 
    <input type = "text" id = "dest" name = "destination_ose" maxlength = "200"><br> 
</div>

자바 스크립트 :

function IsCheck(number){ 
//here we iterate the three divs 
for(i = 1; i <= 3; i++){ 
    //if the current number (i) is different to the checked input (number) 
    if (i != number) { 
     document.getElementById('ifChecked'+i).style.display = 'none'; 
    } 
    else { 
     document.getElementById('ifChecked'+i).style.display = 'block'; 
    } 
}}

출처

2014-05-17 12:05:51 jtrezza

완벽한 작품! 감사 – Saraki

javascript와 html을 사용하여 필드를 표시하거나 사라지게하기

답변

관련 문제