WordPress Fluent Forms点击单选按钮无法获取对应data-calc_value值如何解决

问题根源 #

原有代码的核心问题如下：

• 直接使用jQuery("input[name='typ_podorysu']")会匹配所有同名单选按钮，调用attr()方法时默认只返回第一个匹配元素的属性值，因此无论选中哪一项都只会拿到第一个选项的数值
• 绑定整个document的点击事件会触发大量无效执行，没有精准监听单选按钮的选中状态变更

修复后可直接使用的代码 #

jQuery(document).on('change', "input[name='typ_podorysu']", function() {
  // 仅筛选当前处于选中状态的单选按钮取属性值
  const selectedCalcValue = jQuery("input[name='typ_podorysu']:checked").attr("data-calc_value");
  jQuery("#result").text(selectedCalcValue);
  console.log(selectedCalcValue);
});

代码说明 #

• 改用change事件监听单选按钮状态变更，只有选中值发生变化时才会执行逻辑，性能更好
• 选择器增加:checked筛选条件，仅匹配当前选中的单选按钮，可准确拿到对应选项的自定义属性值
• 采用事件委托方式绑定到document上，兼容Fluent Forms动态渲染表单元素的场景，不会出现动态加载的单选按钮监听失效的问题

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