javascript - 如何通过 jQuery 获取字段集中选定的单选按钮值？

Question

我有 2 个单选按钮包裹在一个字段集中。我想在单击时获取字段集中的 clicked 单选按钮的值。

HTML:

<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" value="Medium" />


</fieldset>

jQuery:

$('#skin-complexion').on('change', function() {

  var value = $(this).val();
  alert(value);      

});

我上面的 jQuery 代码不工作。感谢您的帮助。

Answer 1

您也必须使用 radio 作为选择器，因为您正在更改单选按钮

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  alert(value);      
});

工作片段:-

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  console.log(value);      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" value="Medium" />


</fieldset>

注意:- 如果您希望一次只能选中一个单选按钮，请为它们添加通用的 name 属性/p>

$('#skin-complexion input:radio').on('change', function() {
  var value = $(this).val();
  console.log(value);      
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset id="skin-complexion" name="properties[skin_complexion]">

  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" name="radio_example" value="Fair" />
  Fair

  <img src="{{ 'icon-medium.png' | asset_url }}">
  Medium
  <input type="radio" name="radio_example" value="Medium" />


</fieldset>