Question

我创建了一个包含3个步骤的多阶段表单。在第一步中，您可以选择性别，第二步，您可以选择年龄，最后一步显示您选择的性别以及年龄。

问题在于，当我选择“男人”作为性别时，在最后一步，它不会将性别的值显示为男性（值=“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"。 <{1}}中的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>

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

Answer 2

这是因为您已为性别的单选按钮指定了相同的id属性，并且您正尝试使用该ID获取值。对于作为一个组的单选按钮，您可以通过组名

获取选中的单选按钮

更改

eval()

类似

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

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

输入值未显示

2 个答案: