$( "#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(btw在HTML中无效(。在选中的伪选择器旁边使用属性选择器：

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>

Answer 2

为此使用:checked。

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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" id="gender_female" 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_male" required><i class="fa fa-male"></i> Male
  </label>
</div>

Answer 3

您的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" required><i class="fa fa-female"></i> Female
  </label>
  <label class="btn btn-default btn-lg">
    <input type="radio" name="gender" value="Male"  required><i class="fa fa-male"></i> Male
  </label>
</div>

jquery

$("input[name=gender]").click(function() {
      alert($(this).val());
});

Fiddle