本文介绍如何使用原生 JavaScript 实现：当用户选择单选按钮（radio）时立即滚动至下一组选项；选择复选框（checkbox）时，仅在达到 data-maxqty 限定数量后才滚动，提升表单填写的流畅性与用户体验。

本文介绍如何使用原生 javascript 实现：当用户选择单选按钮（radio）时立即滚动至下一组选项；选择复选框（checkbox）时，仅在达到 `data-maxqty` 限定数量后才滚动，提升表单填写的流畅性与用户体验。

在构建多步骤、分组式的模态弹窗表单（如披萨尺寸→饼底→配料→额外添加项）时，自动滚动到下一逻辑区块能显著优化用户操作路径。核心需求有两点：

• ✅ 单选按钮（radio）：一旦选择即触发滚动（因仅允许单选，视为该组“完成”）；
• ✅ 复选框（checkbox）：需累计已选数量，仅当 checked.length >= data-maxqty 时才滚动，避免过早跳转干扰用户。

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

以下代码基于现代 DOM API，兼容性强、性能高效，且精准匹配你的 HTML 结构（

AI Cheat Check

AI Cheat Check是一款面向学校和机构的 AI 生成文本检测工具。

下载

后紧跟

标题作为下一区块入口）：

document.addEventListener('DOMContentLoaded', () => {
  // 绑定事件监听器（使用事件委托，支持动态内容）
  document.getElementById('toppings-properties-modal').addEventListener('change', function (e) {
    const target = e.target;
    if (!['radio', 'checkbox'].includes(target.type)) return;

    // 1. 确定当前组的可选上限
    const limit = target.type === 'radio' 
      ? 1 
      : parseInt(target.dataset.maxqty || '1', 10);

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

    // 3. 判断是否达到滚动条件
    if (checkedCount >= limit) {
      // 定位当前 

的下一个兄弟元素（通常是 h5/h3 标题） const currentUl = target.closest('ul'); const nextSectionHeader = currentUl?.nextElementSibling; if (nextSectionHeader && nextSectionHeader.tagName.startsWith('H')) { // 平滑滚动至下一标题顶部（预留 20px 偏移避免被 modal-header 遮挡） nextSectionHeader.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' }); } } }); });

? 关键逻辑说明

步骤	作用	注意事项
target.closest('ul')	精准定位当前选项所属的 容器	避免跨组误判，比遍历父级更可靠
nextElementSibling	直接获取 后的首个兄弟节点（即下一组标题）	要求 HTML 中 与 严格相邻，符合你提供的结构
scrollIntoView({ behavior: 'smooth' })	浏览器原生平滑滚动，无需第三方库	可选 block: 'start' 确保标题顶部对齐视口

⚠️ 使用前必查事项

• HTML 结构一致性：确保每个
  后紧跟一个

  （或

  ）作为下一组标题，否则 nextElementSibling 将返回 null；

data-maxqty 属性必须存在：复选框需显式声明 data-maxqty="1" 或 data-maxqty="5"，未设置时默认为 1；

避免重复绑定：本方案使用 DOMContentLoaded + 事件委托，天然防止多次初始化导致的重复监听；

移动端兼容性：scrollIntoView 在 iOS Safari ≥15.4 / Android Chrome ≥90 中完全支持，旧版本可降级为 scrollTop 计算（如需兼容可补充 polyfill）。

? 进阶优化建议

• 若需「滚动后高亮标题」，可在 scrollIntoView 后添加临时 CSS 类：

  nextSectionHeader.classList.add('scroll-highlight');
  setTimeout(() => nextSectionHeader.classList.remove('scroll-highlight'), 2000);

• 如需禁用已填满组的后续选项，可追加：

  if (checkedCount >= limit) {
    groupOptions.forEach(el => el.disabled = true);
  }

该方案轻量、健壮、语义清晰，完美契合你的业务场景——让用户专注选择，系统智能引导，真正实现「所选即所见」的交互体验。