WordPress/Gravity Forms：如何基于单选按钮选中状态显隐元素？

这问题我之前处理过，核心原因很明确：你只给**第一个单选按钮（#choice_13_1_0）**绑定了change事件，但单选按钮组的特性是——当你切换到其他选项时，只有新选中的按钮会触发change事件，原来的选中项不会。所以当你从Option One切到其他选项时，绑定在Option One上的事件根本不会触发，自然无法执行显示div的逻辑。

修正后的代码方案 #

下面是两种可行的解决方式，你可以根据需求选择：

方案1：基于选项ID判断（兼容原逻辑）

jQuery(function ($) {
  // 绑定事件到整个单选按钮组（所有name为input_1的单选框）
  $('input[name="input_1"]').change(function(){
    // 检查Option One是否被选中
    if ($('#choice_13_1_0').is(":checked")) {
      $(".conditional-display").hide();
    } else {
      $(".conditional-display").show();
    }
  });

  // 页面初始化时执行一次，确保初始状态正确
  if ($('#choice_13_1_0').is(":checked")) {
    $(".conditional-display").hide();
  } else {
    $(".conditional-display").show();
  }
});

方案2：基于选项值判断（更灵活易维护）

这个方案不需要依赖具体的选项ID，直接通过单选按钮的value判断，字段ID变化时也不用修改代码：

jQuery(function ($) {
  // 缓存DOM元素，避免重复查询
  const $radioGroup = $('input[name="input_1"]');
  const $targetDiv = $(".conditional-display");

  // 绑定组内所有单选框的change事件
  $radioGroup.change(function(){
    // 判断当前选中的选项值
    if ($(this).val() === "Option One") {
      $targetDiv.hide();
    } else {
      $targetDiv.show();
    }
  });

  // 初始化页面状态
  if ($radioGroup.filter(':checked').val() === "Option One") {
    $targetDiv.hide();
  } else {
    $targetDiv.show();
  }
});

关键改进点 #

• 绑定事件到整个组：把change事件绑定到整个单选按钮组（通过name="input_1"选择），这样切换任何选项都会触发事件。
• 初始化页面状态：页面加载时主动检查一次选中状态，避免默认选中Option One但div仍显示的问题。
• 缓存DOM元素（方案2）：提前缓存需要操作的元素，提升页面性能，尤其是表单元素较多时。

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