页面中通过单选按钮控制表单显示/隐藏时失效，根本原因是缺少事件监听机制；仅靠 window.onload 初始化无法响应后续用户操作，必须为 radio 元素绑定点击事件并实时更新 DOM 状态。

页面中通过单选按钮控制表单显示/隐藏时失效，根本原因是缺少事件监听机制；仅靠 `window.onload` 初始化无法响应后续用户操作，必须为 radio 元素绑定点击事件并实时更新 dom 状态。

在构建交互式表单（如冰激凌门店的配送/自取选项）时，一个常见误区是：仅在页面加载时执行一次初始化逻辑（如 hideDeliveryAndPickup() 和 showDeliveryOrPickup()），却未监听用户后续的交互行为。这导致 showDeliveryOrPickup() 仅在 init() 中被调用一次——即页面首次加载时检查 radio 的 checked 状态，而该状态在用户点击前始终为 false，因此两个表单均保持隐藏；只有强制刷新后，若 radio 恰好因浏览器缓存“记住”了之前的选择，才可能意外生效，但这并非可靠行为。

✅ 正确解法是主动监听用户操作。推荐使用事件委托（event delegation）结合 DOMContentLoaded，确保 DOM 就绪后立即绑定监听器，避免因脚本加载时机导致的 getElementById 返回 null：

window.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("orderhtml");
  const pickupDiv = document.getElementById("pickupDiv");
  const deliveryDiv = document.getElementById("deliveryDiv");

  container.addEventListener("click", (event) => {
    const tgt = event.target;
    // 仅处理 name="chooseDiv" 的 radio 按钮
    if (!tgt.matches("[name=chooseDiv]")) return;

    if (tgt.id === "delivery") {
      deliveryDiv.hidden = false;
      pickupDiv.hidden = true;
    } else if (tgt.id === "pickup") {
      pickupDiv.hidden = false;
      deliveryDiv.hidden = true;
    }
  });
});

? 关键改进点：

• 使用 hidden 属性替代 style.display：语义更清晰、优先级更高，且无需手动管理 inline/block 等显示值；
• 在 HTML 中初始添加 hidden 属性（
• 利用事件委托监听整个容器，避免为每个 radio 单独绑定事件，提升可维护性与性能。

? 进阶优化：通过 data-* 属性解耦逻辑，让 HTML 自描述行为，使 JavaScript 更通用：


Java Maven Code Review
审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。
下载

<input type="radio" id="delivery" name="chooseDiv" value="Delivery" data-target="deliveryDiv"><input type="radio" id="pickup" name="chooseDiv" value="Pickup" data-target="pickupDiv">

对应 JS：

window.addEventListener("DOMContentLoaded", () => {
  const container = document.getElementById("orderhtml");
  const divs = container.querySelectorAll("div[hidden]");

  container.addEventListener("click", (event) => {
    const tgt = event.target;
    if (!tgt.matches("[name=chooseDiv]")) return;

    const targetId = tgt.dataset.target;
    divs.forEach(div => {
      div.hidden = div.id !== targetId;
    });
  });
});

⚠️ 注意事项：

• 不要混用 display: none 和 hidden：二者效果类似但机制不同，hidden 是 HTML 原生属性，优先级高于 CSS；若已用 style.display 控制，需统一改为 hidden 或显式重置 style.display = ""；
• 确保 DOM 加载完成再操作：DOMContentLoaded 比 window.onload 更早触发（不等待图片等资源），更适合 DOM 操作；
• 避免重复绑定：若脚本被多次执行（如开发中热更新），应考虑清理旧监听器或使用模块化封装。

通过以上重构，用户点击“配送”或“自取”单选按钮后，对应表单将即时显示，无需刷新页面——真正实现响应式表单切换，为后续表单验证、提交逻辑打下坚实基础。