本文介绍一种无需 jquery、纯 vanilla js 的通用方案，通过统一命名规范和参数化函数，替代为每个复选框单独编写显示逻辑的冗余做法，显著提升表单可维护性与扩展性。
本文介绍一种无需 jquery、纯 vanilla js 的通用方案，通过统一命名规范和参数化函数，替代为每个复选框单独编写显示逻辑的冗余做法，显著提升表单可维护性与扩展性。
在构建动态表单时，常需根据用户对“父级”复选框的选择，条件性地显示关联的子级内容区块（如尺寸选项、附加功能等）。原始代码中为每组海报（Poster A/B）及其不同规格（8.5×11、11×17）分别编写独立函数（如 randiPosterA85Show），导致逻辑重复、命名混乱、难以维护。更关键的是，新增一组海报（如 Poster C）时需复制粘贴并手动修改 6 处 ID —— 这违背了 DRY（Don’t Repeat Yourself）原则。
核心思路：统一命名 + 单函数驱动
我们摒弃硬编码 ID 的方式，转而采用语义化、可预测的命名约定，并将“哪一组”的标识作为参数传入一个通用函数。例如：
- 复选框 ID 统一格式：checkbox-poster-A、checkbox-poster-B-85、checkbox-poster-C-topic
- 对应下拉区 ID 统一格式：dropdown-poster-A、dropdown-poster-B-85、dropdown-poster-C-topic
这样，仅需一个函数即可处理全部场景：
立即学习“Java免费学习笔记（深入）”；
function togglePoster(target) {
const checkbox = document.getElementById(`checkbox-poster-${target}`);
const dropdown = document.getElementById(`dropdown-poster-${target}`);
if (checkbox && dropdown) {
dropdown.style.display = checkbox.checked ? 'block' : 'none';
}
}✅ 优势说明：
- ✅ 零依赖：完全基于原生 DOM API，兼容所有现代浏览器，不引入任何框架冲突风险；
- ✅ 强健性：通过 if (checkbox && dropdown) 防御性检查，避免因 ID 拼写错误或元素缺失导致脚本中断；
- ✅ 易扩展：新增 Poster C？只需在 HTML 中添加两行（一个 checkbox + 一个 dropdown），并在 onclick 中调用 togglePoster('C-topic') 即可，无需修改 JS 逻辑。
HTML 改造示例（以 Poster A 为例）：
<!-- 父级复选框 -->
<input
type="checkbox"
id="checkbox-poster-A"
onclick="togglePoster('A')"
value="posterA-NewStore"
>
<label for="checkbox-poster-A">A (New Store)</label>
<!-- 对应子级区域（默认隐藏） -->
<div id="dropdown-poster-A" style="margin: 5px 0 0 25px; display: none;">
Size:
<div style="display: inline-block; vertical-align: top;">
<!-- 子级复选框也遵循同一命名体系 -->
<input
type="checkbox"
id="checkbox-poster-A-85"
onclick="togglePoster('A-85')"
value="postera8511"
>
<label for="checkbox-poster-A-85">8.5" x 11"</label>
<!-- 子级下拉区 -->
<div id="dropdown-poster-A-85" style="display: none; margin: 5px 0 5px 20px;">
Options:
<div>
<input type="checkbox" id="postera85qr" value="postera85qr">
<label for="postera85qr">Add QR Code</label><br>
<input type="checkbox" id="postera85sp" value="postera85sp">
<label for="postera85sp">Include Spanish Version</label>
</div>
</div>
</div>
</div>⚠️ 注意事项：
- 命名中的连字符 - 是合法且推荐的分隔符，比驼峰式更利于人工识别与维护；
- 若需支持 IE8 及更旧版本，请将 style.display = 'block' 替换为 style.display = ''（清空样式以继承 CSS 规则）；
- 强烈建议后续逐步将 <table> 布局替换为语义化 <fieldset> + <div> 结构，提升可访问性（a11y）与响应式兼容性；
- 如未来项目允许引入轻量工具库，可进一步用 data-* 属性解耦（如 data-target="A"），实现更灵活的绑定，但当前方案已足够稳健。
通过这一重构，代码行数减少约 70%，逻辑集中、意图清晰、新人上手成本大幅降低 —— 这正是专业前端实践所追求的简洁性与可持续性。
