如何修改JS脚本实现HTML问卷所有题目选YES显示对应隐藏字段

我制作了一份HTML调查问卷，每道题支持用户选择YES或NO作答：选中NO选项时，题目的附加字段保持隐藏；选中YES选项时，需要展示该题对应包含补充说明的隐藏字段。
现有代码仅能在第一道题上正常生效，后续题目无法触发对应的显隐逻辑，需要修改脚本让显隐功能适配问卷内所有题目。

原JS脚本 #

function showhideInfo()
{
if (document.getElementById('inlineRadio1').checked) {
     document.getElementById('reqdfield').style.display = 'block';
     }
     else document.getElementById('reqdfield').style.display = 'none';
}

原题目HTML结构 #

<div class="input-group">
      <b><label class = "label">Have you attended this course before</label></b>
      <div class="form-check form-check-inline">
        <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio1" value="YES" onclick="showhideInfo()">
          <label class="form-check-label" for="inlineRadio1">YES</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio" name="inlineRadioOptions" id="inlineRadio2" value="NO" onclick="showhideInfo()">
          <label class="form-check-label" for="inlineRadio2">NO</label>
        </div>
      <div class="regdInfo" id="reqdfield" style="display:none">
        You will need to provide details of previous course attended.
      </div>
    </div> 

原函数硬编码了固定元素id：只识别id为inlineRadio1的单选框、id为reqdfield的附加字段。但id是页面全局唯一属性，后续题目不可能复用这两个id，函数找不到对应元素，自然无法触发显隐逻辑。

放弃硬编码id的写法，点击单选框时把当前触发事件的元素对象传入函数，通过DOM的父子关联关系定位到当前题目下的附加字段，一套逻辑就能适配所有同结构的题目，不需要为每道题单独写函数。

修改后的通用JS脚本 #

function showhideInfo(currentRadio) {
  // 向上查找当前单选框所属的题目容器
  const questionWrap = currentRadio.closest('.input-group');
  // 查找当前题目下对应的附加说明字段
  const extraField = questionWrap.querySelector('.regdInfo');
  // 选中YES时展示字段，其他情况隐藏
  extraField.style.display = currentRadio.checked && currentRadio.value === 'YES' ? 'block' : 'none';
}

HTML结构调整规则 #

所有题目保持统一的.input-group容器、.regdInfo附加字段的class命名，单选框的点击事件传入this指代当前元素即可，不需要为每个元素设置唯一id。
注意：不同题目的单选框name属性必须设置不同值，否则会出现跨题目单选互斥的bug。

多题复用示例：

<!-- 第一题 -->
<div class="input-group">
  <b><label class="label">Have you attended this course before</label></b>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="q1" value="YES" onclick="showhideInfo(this)">
    <label class="form-check-label">YES</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="q1" value="NO" onclick="showhideInfo(this)" checked>
    <label class="form-check-label">NO</label>
  </div>
  <div class="regdInfo" style="display:none">
    You will need to provide details of previous course attended.
  </div>
</div>

<!-- 第二题 直接复用结构即可，无需修改JS -->
<div class="input-group">
  <b><label class="label">Do you have relevant work experience</label></b>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="q2" value="YES" onclick="showhideInfo(this)">
    <label class="form-check-label">YES</label>
  </div>
  <div class="form-check form-check-inline">
    <input class="form-check-input" type="radio" name="q2" value="NO" onclick="showhideInfo(this)" checked>
    <label class="form-check-label">NO</label>
  </div>
  <div class="regdInfo" style="display:none">
    Please provide details of your relevant work experience.
  </div>
</div>

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