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

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

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

本文介绍如何使用原生 javascript 实现：当用户选择完一组单选按钮（radio）或达到复选框（checkbox）最大可选项数时，自动平滑滚动至下一个配置区块（如 `

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

在餐饮类或商品定制化弹窗（如披萨尺寸、配料、饼底等分组配置）中，用户常需依次完成多个逻辑分组的选择。为优化用户体验，我们希望：
✅ 点击任一 单选按钮（type="radio"）后，立即滚动至下一组配置标题；
✅ 点击 复选框（type="checkbox"）后，仅当当前组已选数量达到 data-maxqty 限制时，才触发滚动；
✅ 滚动目标为紧邻当前

（即下一组配置的标题），并采用平滑动画。

核心实现逻辑

关键在于精准识别「当前选项组」和「滚动触发条件」：

Javascript Sdk

用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。

下载

利用 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 <h3>注意事项与最佳实践</h3>

✅ 语义化定位：优先滚动到
而非
⚠️ 容错处理：添加 ?. 可选链操作符和 tagName 判断，避免 nextElementSibling 为空或非标题元素导致报错；
? 避免重复绑定：shown.bs.modal 事件内注册一次即可，无需每次打开都重绑；
? 兼容性：scrollIntoView({ behavior: "smooth" }) 在现代浏览器中支持良好；若需兼容 IE，可降级为 scrollTop 计算；
? 扩展建议：如需支持“返回上一组”，可记录上一个
并提供回退按钮；若分组嵌套复杂，建议为每组