本文介绍一种无需 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
这样，仅需一个函数即可处理全部场景：
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 规则）；
- 强烈建议后续逐步将
布局替换为语义化
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
