使用jQuery检测Gravity Forms中li元素的状态变化

我来帮你搞定这个需求，根据你提供的HTML结构，Gravity Forms的选项元素状态变化主要分两种场景：可见性（显示/隐藏）变化和复选框选中状态变化，下面分别给出对应的实现方案：

一、监听

元素的显示/隐藏状态变化 #

Gravity Forms会通过修改元素的gfield_visibility_visible或gfield_visibility_hidden类来控制选项的显示隐藏，这类DOM属性变化没法用普通的jQuery事件监听，推荐用原生的MutationObserver来实现：

// 定位目标选项li（比如你示例里的gchoice_7_186_1）
const targetOptionLi = document.querySelector('.gchoice_7_186_1');

// 配置Observer：只监听class属性的变化
const observerConfig = {
  attributes: true,
  attributeFilter: ['class']
};

// 定义状态变化后的回调逻辑
const handleVisibilityChange = function(mutationsList) {
  for (let mutation of mutationsList) {
    if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
      const isVisible = targetOptionLi.classList.contains('gfield_visibility_visible');
      const isHidden = targetOptionLi.classList.contains('gfield_visibility_hidden');

      if (isVisible) {
        console.log('这个附加服务选项现在显示了');
        // 在这里添加你需要执行的业务逻辑，比如显示关联内容、更新总价等
      } else if (isHidden) {
        console.log('这个附加服务选项现在隐藏了');
        // 在这里添加隐藏后的处理逻辑，比如清除关联选择、更新总价等
      }
    }
  }
};

// 创建并启动Observer
const visibilityObserver = new MutationObserver(handleVisibilityChange);
visibilityObserver.observe(targetOptionLi, observerConfig);

// 如果后续需要停止监听，执行：visibilityObserver.disconnect();

如果你需要监听整个「附加服务」字段（父级的#field_7_186）的显示隐藏，只需要把querySelector的目标换成#field_7_186即可。

二、监听

内复选框的选中状态变化 #

如果是要检测用户是否选中/取消选中这个选项，直接监听复选框的change事件即可，用事件委托的方式还能兼容动态生成的选项：

// 监听整个复选框组内的选项变化
$('#input_7_186').on('change', '.gchoice input', function() {
  const $checkbox = $(this);
  const isChecked = $checkbox.is(':checked');
  const $parentLi = $checkbox.closest('li.gchoice');
  const optionText = $parentLi.find('.gchoice_label').text().trim();

  if (isChecked) {
    console.log(`选项「${optionText}」被选中了`);
    // 选中后的逻辑：比如计算附加费用、显示额外表单字段等
  } else {
    console.log(`选项「${optionText}」被取消选中了`);
    // 取消选中后的逻辑：比如扣除附加费用、隐藏额外表单字段等
  }
});

额外提示 #

• MutationObserver是现代浏览器都支持的原生API，比第三方jQuery插件更稳定，适合处理Gravity Forms这类动态修改DOM类的场景。
• 事件委托的方式（绑定在父级#input_7_186上）可以避免因为Gravity Forms动态加载选项导致的事件绑定失效问题。

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