javascript - 在类型上显示单选值

Question

$(document).on('keyup', function() {
  var x = $('form input[type=radio]:checked').val();
  $("#gender-text").text($(this).val(x));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label><input type="radio" name="gender" value="Male" >Male</label>
  <label><input type="radio" name="gender" value="Female">Female</label>
</div>
<div class="form-group">
  <label>Gender: </label>
  <h5 id="gender-text"></h5>
</div>

在上面的代码中，如何在类型上显示选定的单选值。

Answer 1

您应该监听radio的change事件，而不是在document上使用keyup事件按钮。

• 您需要使用 $('input[name="gender"]') 来定位您的电台按钮，您的选择器是错误的，因为 'form input[type=radio]' 暗示您的单选按钮位于 form 下，这是错误的。
• 并且不是将 $(this).val(x) 设置为 display 元素，只需使用x，因为它保存所选单选按钮的值，因为代码中的$(this)引用document 因此您的实际代码将引发错误。

这就是您的代码:

$('input[name="gender"]').on('change', function() {
  var x = $('input[name="gender"]:checked').val();
  $("#gender-text").text(x);
});

演示:

$('input[name="gender"]').on('change', function() {
  var x = $('input[name="gender"]:checked').val();
  $("#gender-text").text(x);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio">
  <label><input type="radio" name="gender" value="Male" >Male</label>
  <label><input type="radio" name="gender" value="Female">Female</label>
</div>
<div class="form-group">
  <label>Gender: </label>
  <h5 id="gender-text"></h5>
</div>