本文介绍如何使用原生 JavaScript 实现：当用户选择完一组单选按钮（radio）或达到复选框（checkbox）最大可选项数时，自动平滑滚动至下一个配置区块（如 <h5> 标题），提升多步骤表单的交互体验。
本文介绍如何使用原生 javascript 实现：当用户选择完一组单选按钮（radio）或达到复选框（checkbox）最大可选项数时，自动平滑滚动至下一个配置区块（如 `
` 标题），提升多步骤表单的交互体验。
在餐饮类或商品定制化弹窗（如披萨尺寸、配料、饼底等分组配置）中，用户常需依次完成多个逻辑分组的选择。为优化用户体验，我们希望：
✅ 点击任一 单选按钮（type="radio"）后，立即滚动至下一组配置标题；
✅ 点击 复选框（type="checkbox"）后，仅当当前组已选数量达到 data-maxqty 限制时，才触发滚动；
✅ 滚动目标为紧邻当前 <ul> 的下一个 <h5>（即下一组配置的标题），并采用平滑动画。
核心实现逻辑
关键在于精准识别「当前选项组」和「滚动触发条件」：
- 利用 this.name 获取同组所有控件（document.getElementsByName()）；
- 区分类型：radio 组天然限选 1 项，checkbox 组则读取 data-maxqty 属性；
- 计算已选数量，并与限制值比对；
- 通过 this.closest("ul").nextElementSibling 定位下一个兄弟元素（即下一标题），调用 scrollIntoView() 实现平滑滚动。
完整可运行代码
<!-- 引入 Bootstrap 5 和 jQuery（仅用于 modal 触发，核心逻辑为原生 JS） -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.2/js/bootstrap.min.js"></script>
<!-- 触发按钮 -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#toppings-properties-modal">
打开配置弹窗
</button>
<!-- 配置弹窗 HTML（精简版，保留关键结构） -->
<div id="toppings-properties-modal" class="modal fade" tabindex="-1" aria-modal="true" role="dialog">
<div class="modal-dialog">
<div class="modal-content mb-3">
<div class="modal-body pb-3" style="background-color:#f5f5f5;max-height:70vh;overflow-y:auto">
<div class="row m-0">
<!-- 商品信息区（略） -->
<div class="col-12" id="menu-item-toppings" style="display:block">
<!-- 第一组：Crust Pizza（限选 1） -->
<h5 class="txt_dark f_merriweather mb-2 mt-2 fs_18 fw-bold">Crust Pizza [Giant]</h5>
<p class="txt_dark f_merriweather fs_12">You can select upto 1 option</p>
<ul class="topping-list">
<li>Cheesy Crust <div class="d-flex">
<label class="container">
<input name="menu-topping-646" data-maxqty="1" type="checkbox" onchange="selectToppings(this)">
<span class="checkmark"></span>
</label>
</div></li>
<li>Achari Crust <div class="d-flex">
<label class="container">
<input name="menu-topping-646" data-maxqty="1" type="checkbox" onchange="selectToppings(this)">
<span class="checkmark"></span>
</label>
</div></li>
</ul>
<!-- 第二组：Extra Cheese（限选 1） -->
<h5 class="txt_dark f_merriweather mb-2 mt-2 fs_18 fw-bold">Extra Cheese [Giant]</h5>
<p class="txt_dark f_merriweather fs_12">You can select upto 1 option</p>
<ul class="topping-list">
<li>Extra Cheese <div class="d-flex">
<label class="container">
<input name="menu-topping-647" data-maxqty="1" type="checkbox" onchange="selectToppings(this)">
<span class="checkmark"></span>
</label>
</div></li>
</ul>
<!-- 第三组：Radio 示例（单选即滚动） -->
<h5 class="txt_dark f_merriweather mb-2 mt-2 fs_18 fw-bold">Pizza Size</h5>
<p class="txt_dark f_merriweather fs_12">Select any one option</p>
<ul class="topping-list">
<li>Giant <div class="d-flex">
<label class="container">
<input name="pizza-size" type="radio" onchange="selectToppings(this)">
<span class="checkmark"></span>
</label>
</div></li>
<li>Large <div class="d-flex">
<label class="container">
<input name="pizza-size" type="radio" onchange="selectToppings(this)">
<span class="checkmark"></span>
</label>
</div></li>
</ul>
</div>
</div>
</div>
<div class="modal-footer">
<a class="add-to-cart-modal">Add to Cart</a>
</div>
</div>
</div>
</div>// 全局空函数占位（避免未定义错误）
window.selectToppings = () => {};
$(document).ready(function () {
function scrollModalBodyToBottom() {
// 1. 确定当前组选择上限
const limit = this.type === "radio"
? 1
: parseInt(this.dataset.maxqty ?? "1", 10);
// 2. 获取同名控件中已选中的数量
const checked = Array.from(document.getElementsByName(this.name))
.filter(el => el.checked);
// 3. 达到上限时滚动到下一标题
if (limit <= checked.length) {
const nextHeading = this.closest("ul")?.nextElementSibling;
if (nextHeading && nextHeading.tagName === "H5") {
nextHeading.scrollIntoView({
behavior: "smooth",
block: "start"
});
}
}
}
// 4. 在模态框显示后绑定事件（确保 DOM 已就绪）
$("#toppings-properties-modal").on("shown.bs.modal", function () {
// 使用事件委托更健壮（推荐），此处为简化直接绑定
$('input[type="radio"], input[type="checkbox"]').on("change", scrollModalBodyToBottom);
});
});注意事项与最佳实践
- ✅ 语义化定位：优先滚动到 <h5> 而非 <ul>，因标题才是用户视觉焦点，且符合 HTML 结构语义；
- ⚠️ 容错处理：添加 ?. 可选链操作符和 tagName 判断，避免 nextElementSibling 为空或非标题元素导致报错；
- ? 避免重复绑定：shown.bs.modal 事件内注册一次即可，无需每次打开都重绑；
- ? 兼容性：scrollIntoView({ behavior: "smooth" }) 在现代浏览器中支持良好；若需兼容 IE，可降级为 scrollTop 计算；
- ? 扩展建议：如需支持“返回上一组”，可记录上一个 <h5> 并提供回退按钮；若分组嵌套复杂，建议为每组 <ul> 添加唯一 data-group-id 便于精准控制。
该方案轻量、可靠，无需依赖额外库，完美适配 Bootstrap Modal 场景，显著提升长表单的操作流畅度。
