如何在点击单选按钮或复选框后自动滚动到下一个选项区块-js教程-PHP中文网

如何在点击单选按钮或复选框后自动滚动到下一个选项区块

本文介绍如何使用原生 JavaScript 实现：当用户完成单选（radio）选择，或达到复选（checkbox）数量上限时，自动平滑滚动至下一个标题区块，提升多步骤表单的交互体验。

本文介绍如何使用原生 javascript 实现：当用户完成单选（radio）选择，或达到复选（checkbox）数量上限时，自动平滑滚动至下一个 `

` 标题区块，提升多步骤表单的交互体验。

在构建商品定制类弹窗（如披萨尺寸、饼底、配料选择）时，常需引导用户按顺序完成多个分组选项。理想交互是：用户选完当前组（例如“尺寸”单选），页面自动滚动到下一组标题（如“饼底类型”）；若为复选组（如“最多选2种配料”），则仅在选满限定数量后才触发滚动。这不仅能减少手动拖动，还能强化流程引导感。

实现该功能的核心逻辑分为三步：识别当前控件类型与限制值 → 统计同组已选数量 → 判断是否满足滚动条件并执行平滑定位。以下是完整、可直接集成的解决方案：

✅ 推荐实现（原生 JS，无 jQuery 依赖）

document.addEventListener('DOMContentLoaded', () => {
  // 监听模态框显示完成事件（Bootstrap 5）
  const modal = document.getElementById('toppings-properties-modal');
  if (modal) {
    modal.addEventListener('shown.bs.modal', () => {
      // 统一监听所有 radio 和 checkbox 的 change 事件
      document.querySelectorAll('input[type="radio"], input[type="checkbox"]').forEach(el => {
        el.addEventListener('change', function () {
          // 1. 确定当前组的选择上限
          const limit = this.type === 'radio' 
            ? 1 
            : parseInt(this.dataset.maxqty || '1', 10);

          // 2. 获取同 name 组内所有已选控件
          const groupName = this.name;
          const groupOptions = document.querySelectorAll(`input[name="${groupName}"]`);
          const checkedCount = Array.from(groupOptions).filter(opt => opt.checked).length;

          // 3. 达到上限时，滚动至紧邻的下一个 <h5> 标题（即下一组起始点）
          if (checkedCount >= limit && limit > 0) {
            const currentUl = this.closest('ul');
            if (currentUl) {
              // 查找 ul 后第一个 <h5> 兄弟元素（语义更准确，比 nextElementSibling 更健壮）
              let nextHeading = currentUl.nextElementSibling;
              while (nextHeading && !nextHeading.matches('h5')) {
                nextHeading = nextHeading.nextElementSibling;
              }
              if (nextHeading) {
                nextHeading.scrollIntoView({ 
                  behavior: 'smooth', 
                  block: 'start' 
                });
              }
            }
          }
        });
      });
    });
  }
});</h5>
</h5>

? 关键设计说明

精准定位目标：不依赖 nextElementSibling（可能不是标题），而是主动查找下一个元素，确保滚动锚点语义正确；
健壮的限额解析：data-maxqty 缺失时默认为 1，避免 NaN 导致逻辑中断；
零 jQuery 依赖：使用现代 DOM API（closest, matches, scrollIntoView），兼容 Chrome 61+ / Firefox 68+ / Safari 15.4+；
防误触发：仅在 checkedCount >= limit 时滚动，支持“选满即跳”，也兼容 maxqty="0"（禁用滚动）等边界场景。