页面中通过单选按钮控制表单显示/隐藏时失效，根本原因是缺少事件监听机制；仅靠 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 属性（<div id="pickupDiv" hidden>），确保首屏无闪烁、状态确定；
- 利用事件委托监听整个容器，避免为每个 radio 单独绑定事件，提升可维护性与性能。
? 进阶优化：通过 data-* 属性解耦逻辑，让 HTML 自描述行为，使 JavaScript 更通用：
立即学习“Java免费学习笔记（深入）”；
<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 操作；
- 避免重复绑定：若脚本被多次执行（如开发中热更新），应考虑清理旧监听器或使用模块化封装。
通过以上重构，用户点击“配送”或“自取”单选按钮后，对应表单将即时显示，无需刷新页面——真正实现响应式表单切换，为后续表单验证、提交逻辑打下坚实基础。
