单选按钮选中时页面滚动到单选组首行的实现问题

• 仅为第二个单选框对应的label绑定了点击事件，第一个单选框的input和label均未绑定触发逻辑，点击第一个单选框不会触发滚动
• 点击单选框的圆形选择区域时，不会触发label上绑定的点击事件
• 滚动逻辑中引用的divFirst元素不存在于你给出的页面结构中，事件触发后也会因找不到元素报错

步骤1：修改HTML结构 #

给单选框组的首个容器添加divFirst id作为滚动锚点，同时删除label上冗余的行内点击绑定：

<div id="divFirst" class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1">
  <label class="form-check-label" for="flexRadioDefault1">
    Default radio
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" checked>
  <label class="form-check-label" for="flexRadioDefault2">
    Default checked radio
  </label>
</div>

步骤2：修改JavaScript逻辑 #

直接给同组所有单选框绑定change事件，该事件会在单选框选中状态变更时触发，不管点击的是单选框本身还是对应label都会生效：

方案A：任意单选框选中都滚动到组首（符合初始需求） #

const allRadios = document.querySelectorAll('input[name="flexRadioDefault"]');
allRadios.forEach(radio => {
  radio.addEventListener('change', () => {
    document.getElementById('divFirst').scrollIntoView({
      behavior: 'smooth' // 不需要平滑滚动可以删除该参数
    });
  });
});

方案B：仅第一个单选框选中时滚动到组首（符合你最后提到的需求） #

const allRadios = document.querySelectorAll('input[name="flexRadioDefault"]');
allRadios.forEach(radio => {
  radio.addEventListener('change', function() {
    if (this.id === 'flexRadioDefault1') {
      document.getElementById('divFirst').scrollIntoView();
    }
  });
});

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