输入值未显示

Question

我已经创建了一个多阶段的形式，它有三个步骤。第一步你可以选择性别，第二步你可以选择你的年龄，最后一步显示你所选择的性别和年龄。

问题是，当我选择“男人”作为性别，在最后一步，它没有显示性别作为男人的价值(value = "m")，而是将其显示为女性(value ="w")。

我如何解决这个问题？

部分代码HTML

<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

用class="gender"代替id="gender"。元素的id在document中应该是唯一的。

document.querySelector()与选择器".gender:checked"在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;

密码http://codepen.io/anon/pen/ObYrEO

Answer 2

这是因为您已经为您的单选按钮提供了相同的ID属性，并且您正在尝试使用id来获取值。

变化

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

到某种程度上

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

在剧本中得到性别的价值如下所示。

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

代码笔：http://codepen.io/anon/pen/qqGLyO