입력 값이 표시되지 않습니다.

Question

3 단계로 구성된 다상 형식을 만들었습니다. 첫 번째 단계에서는 성별을 선택하고, 두 번째 단계에서는 나이를 선택할 수 있으며, 마지막 단계는 선택한 성별과 연령을 표시 할 수 있습니다.

문제는 성별에 '남자'를 선택하면 최종 단계에서 남성 (값 = "m")으로 성별의 값을 표시하지 않고 대신 여성으로 표시합니다 (값 = "w").

이 문제를 어떻게 해결할 수 있습니까?

id="gender"에 대한 class="gender"

<h3 id="status">Phase 1 of 2</h3> 
<form id="multiphase" onsubmit="return false"> 
    <div id="phase1"> 
    <div> 
     <label> 
     <input id="gender" type="radio" name="gender" value="w" /> 
     <img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/female-shadow-circle-512.png" width="180px" height="180px"> 
     </label> 
     <label> 
     <input id="gender" type="radio" name="gender" value="m"/> 
     <img src="http://www.interport.sk/sites/default/files/inline-images/riaditel-spolocnosti_2.png" width="180px" height="180px"> 
     </label> 
    </div> 
    <button onclick="processPhase1()">Continue</button> 
    </div> 
    <div id="phase2"> 
     <div> 
     <select id="age" name="age"> 
      <option>Choose your age</option> 
      <option>18</option> 
      <option>19</option> 
     </select> 
     </div> 
     <button onclick="processPhase2()" class="button-phase2">Continue</button> 
    </div> 
    <div id="show_all_data"> 
     Gender: <span id="display_gender"></span> <br> 
     Age: <span id="display_age"></span> <br> 
    </div> 
</form> 

Answer 1

대체 부분 코드 HTML. 요소의 id은 document에 고유해야합니다.

codepen processPhase1 기능

<div id="phase1"> 
    <div> 
    <label> 
     <input class="gender" type="radio" name="gender" value="w" /> 
     <img src="https://cdn2.iconfinder.com/data/icons/rcons-user/32/female-shadow-circle-512.png" width="180px" height="180px"> 
    </label> 

    <label> 
     <input class="gender" type="radio" name="gender" value="m" /> 
     <img src="http://www.interport.sk/sites/default/files/inline-images/riaditel-spolocnosti_2.png" width="180px" height="180px"> 
    </label> 

    </div> 
    <button onclick="processPhase1()">Continue</button> 

gender = document.querySelector(".gender:checked").value; 

에서 선택 ".gender:checked"에 사용 document.querySelector()http://codepen.io/anon/pen/ObYrEO 당신이 성별과 당신을 위해 라디오 버튼에 동일한 id 속성을 준 때문이다

Answer 2

ID를 사용하여 값을 가져 오려고합니다. 그룹입니다 라디오 버튼의 경우는

<input id="genderw" type="radio" name="gender" value="w" /> 
<input id="genderm" type="radio" name="gender" value="m"/> 

같이 변경

그룹 이름으로 뭔가

<input id="gender" type="radio" name="gender" value="w" /> 
<input id="gender" type="radio" name="gender" value="m"/> 

을 확인 라디오 버튼을 얻을 수 있습니다 및 스크립트 등에서 남녀의 값을 얻을 이하.

gender = document.querySelector('input[name="gender"]:checked').value; 

코드 펜 : 요소의 http://codepen.io/anon/pen/qqGLyO