如何通过jQuery获取fieldset中被点击单选按钮的选中值？

嘿，我来帮你搞定这个问题～你的代码之所以不工作，核心问题出在监听对象和取值逻辑上，我给你拆解下原因和修正方案：

为什么原代码失效？ #

fieldset元素本身并没有value属性，虽然它能接收到内部表单元素变化触发的change事件（事件冒泡机制），但$(this).val()根本拿不到单选按钮的选中值。另外你的HTML还有个小疏漏：同组单选按钮必须设置相同的name属性，才能实现「互斥选中」的效果，不然用户可以同时勾选多个选项，不符合单选框的设计初衷哦。

修正后的完整实现 #

第一步：完善HTML结构（补充单选框name） #

<fieldset id="skin-complexion" name="properties[skin_complexion]">
  <img src="{{ 'icon-fair.png' | asset_url }}">
  <input type="radio" name="skin_complexion" value="Fair" /> Fair
  <img src="{{ 'icon-medium.png' | asset_url }}">
  <input type="radio" name="skin_complexion" value="Medium" /> Medium
</fieldset>

第二步：修正jQuery逻辑（两种可选方案） #

方案1：直接监听单选按钮的change事件

这种方式更直接，精准监听目标元素：

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

方案2：在fieldset的change事件中查找选中项

如果你坚持要监听fieldset的事件，可以通过内部查找来获取选中值：

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

现在点击单选按钮时，就能正确弹出对应的选中值啦～

内容的提问来源于stack exchange，提问作者Adrian