jQuery：如何为多组单选按钮复用同一函数

我之前做过类似的需求，刚好可以给你梳理下这个实用的实现思路：

• 核心功能逻辑：你有一个包含多项Yes/No单选选择题的HTML表单，当用户选中某题的"Yes"选项时，对应的补充问题会自动显示出来。背后的JS函数会监听单选按钮的输入状态，专门检测值为yes的选项。

• 复用技巧（重点！）：如果想让其他Yes/No问题也实现“选Yes显示额外问题”的功能，完全不用重复写新函数！只需要给目标单选按钮做两个简单设置：

  1. 添加toggle类；
  2. 设置data-target属性，属性值和你要显示的隐藏问题的ID完全匹配即可。

给你贴个直观的代码示例：

HTML 结构示例 #

<!-- 主问题1 -->
<div class="question-group">
  <p>你是否有前端开发经验？</p>
  <input type="radio" name="front-exp" class="toggle" data-target="front-detail" value="yes"> Yes
  <input type="radio" name="front-exp" value="no"> No
</div>

<!-- 隐藏的补充问题1 -->
<div id="front-detail" style="display: none;">
  <p>请列出你擅长的前端框架：</p>
  <input type="text" name="front-frameworks">
</div>

<!-- 主问题2（复用逻辑） -->
<div class="question-group">
  <p>你是否参与过开源项目？</p>
  <input type="radio" name="open-source" class="toggle" data-target="os-detail" value="yes"> Yes
  <input type="radio" name="open-source" value="no"> No
</div>

<!-- 隐藏的补充问题2 -->
<div id="os-detail" style="display: none;">
  <p>请提供开源项目的链接：</p>
  <input type="url" name="os-link">
</div>

JavaScript 核心函数 #

// 监听所有带toggle类的单选按钮
document.querySelectorAll('.toggle').forEach(radioBtn => {
  radioBtn.addEventListener('change', function() {
    const targetId = this.getAttribute('data-target');
    const targetElement = document.getElementById(targetId);
    
    // 根据选中值控制补充问题的显示/隐藏
    if (this.value === 'yes') {
      targetElement.style.display = 'block';
    } else {
      targetElement.style.display = 'none';
    }
  });
});

这样不管你有多少个需要触发的问题，只要按规则设置类和属性，这个函数就能自动生效，非常灵活！

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