构建多步骤表单时Jquery无法捕获单选按钮取消选中事件

嘿，这个问题我之前做表单交互的时候也踩过坑！单选按钮本身确实没有原生的uncheck事件——毕竟同一组里只能有一个选项处于选中状态，浏览器不会单独触发“取消选中”的事件。不过咱们可以通过跟踪选中状态变化的方式来模拟实现这个需求，下面给你两种实用的解决方案：

方法一：跟踪历史选中项，对比变化触发逻辑 #

这种方法适合静态渲染的单选组，核心是用变量存储上一次选中的单选按钮，在change事件里对比当前选中项和历史项，就能判断哪个按钮被取消了。

结合你的HTML结构，代码可以这么写：

<!-- 你的原有HTML -->
<div class="form-group">
  <div class="form-check">
    <input id="1-1" class="form-check-input" type="radio" name="firstRadioGroup">
    <label for="1-1">Radio button 1-1</label>
  </div>
  <div class="form-check">
    <input id="1-2" class="form-check-input" type="radio" name="firstRadioGroup" data-show="#textarea-1">
    <label for="1-2">Radio button 1-2</label>
  </div>
</div>
<div id="textarea-1" style="display:none;">
  <textarea class="form-control" placeholder="选中1-2时显示的文本框"></textarea>
</div>

// 初始化：存储当前已经选中的单选按钮（如果有的话）
let prevSelectedRadio = $('input[name="firstRadioGroup"]:checked')[0];

// 监听整个单选组的change事件
$('input[name="firstRadioGroup"]').on('change', function() {
  // 检查是否有之前选中的项，且不是当前触发事件的按钮
  if (prevSelectedRadio && prevSelectedRadio !== this) {
    console.log(`单选按钮 ${prevSelectedRadio.id} 已被取消选中`);
    // 这里可以写取消选中后的逻辑，比如隐藏关联的textarea
    if ($(prevSelectedRadio).data('show')) {
      $($(prevSelectedRadio).data('show')).hide();
    }
  }

  // 更新历史选中项为当前选中的按钮
  prevSelectedRadio = this;

  // 处理当前选中按钮的逻辑，比如显示关联的textarea
  if ($(this).data('show')) {
    $($(this).data('show')).show();
  }
});

方法二：自定义uncheck事件，更灵活的逻辑绑定 #

如果你的表单有动态添加的单选按钮，或者需要单独绑定取消事件的处理函数，可以手动触发自定义的uncheck事件，让代码结构更清晰：

// 用事件委托处理动态元素
$(document).on('change', 'input[name="firstRadioGroup"]', function() {
  const $group = $(this).closest('.form-group');
  // 从父元素的data里获取历史选中项ID
  const prevSelectedId = $group.data('prevSelected');

  if (prevSelectedId && prevSelectedId !== this.id) {
    // 手动触发自定义的uncheck事件
    $(`#${prevSelectedId}`).trigger('uncheck');
  }

  // 更新父元素存储的历史选中ID
  $group.data('prevSelected', this.id);

  // 当前选中的逻辑
  if ($(this).data('show')) {
    $($(this).data('show')).show();
  }
});

// 单独绑定uncheck事件的处理函数
$('input[name="firstRadioGroup"]').on('uncheck', function() {
  console.log(`单选按钮 ${this.id} 被取消选中啦`);
  // 这里写你需要的取消逻辑，比如隐藏对应组件
  if ($(this).data('show')) {
    $($(this).data('show')).hide();
  }
});

核心思路总结 #

单选按钮的“取消选中”是间接发生的——只有当同组的另一个按钮被选中时，之前的按钮才会取消状态。所以我们不需要去监听不存在的原生事件，只需要通过对比选中状态的前后变化，就能精准捕获哪个按钮被取消了，进而执行对应的逻辑。

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