javascript - $( "#id").val();显示错误结果？

Question

HTML:

<div class="form-group btn-group btn-group-justified" data-toggle="buttons">
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Female" id="gender" required><i class="fa fa-female"></i> Female
  </label>
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Male" id="gender" required><i class="fa fa-male"></i> Male
  </label>
</div>

如果我选择 Male 选项并运行 val() 我不会得到 Male:

$( "#gender" ).val();
"Female"

为什么我会成为女性？

Answer 1

因为两个单选按钮具有相同的 ID(顺便说一句，这在 HTML 中是无效的)。使用attribute selector旁边checked pseudo selector相反:

alert($("input[name='gender']:checked").val());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group btn-group btn-group-justified" data-toggle="buttons">
      <label class="btn btn-default btn-lg">
        <input type="radio" name="gender" value="Female" required><i class="fa fa-female"></i> Female
      </label>
      <label class="btn btn-default btn-lg">
        <input type="radio" name="gender" value="Male" required checked><i class="fa fa-male"></i> Male
      </label>
    </div>