本文介绍一种不依赖 JavaScript 的纯前端方案，利用 CSS :checked 伪类与隐藏/显示机制，实现用户点击“添加”按钮后逐步展开预渲染列表项的效果，适用于需完全禁用 JS 的场景。
本文介绍一种不依赖 javascript 的纯前端方案，利用 css `:checked` 伪类与隐藏/显示机制，实现用户点击“添加”按钮后逐步展开预渲染列表项的效果，适用于需完全禁用 js 的场景。
在无法使用 JavaScript 的严格环境下（如政府合规要求、老旧设备支持或安全沙箱限制），仍需提供基础交互体验——例如让用户逐批展开表单输入字段。虽然真正的动态 DOM 操作不可行，但可通过预渲染 + CSS 控制显隐模拟“按需加载”效果。其核心思想是：将全部可能用到的输入项（如 100 个）预先写入 HTML，再通过复选框（<input type="checkbox">）作为触发开关，结合 :checked 伪类与相邻/后续兄弟选择器（~），控制对应区块的可见性。
以下是一个可直接运行的最小可行示例，支持分组展开（每组 10 项），并自动切换“添加”按钮状态：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>纯 CSS 列表扩容</title>
<style>
/* 默认隐藏所有扩展区块和关联按钮 */
.group, .add-btn { display: none; }
/* 第一组始终可见 */
.group:first-of-type { display: block; }
/* 点击 checkbox 后，显示对应 group 和下一个 add-btn */
#show11:checked ~ .group:nth-of-type(2) { display: block; }
#show11:checked ~ #add11 { display: none; }
#show11:checked ~ #add21 { display: inline-block; }
#show21:checked ~ .group:nth-of-type(3) { display: block; }
#show21:checked ~ #add21 { display: none; }
#show21:checked ~ #add31 { display: inline-block; }
/* 可继续按此模式扩展至 100 项 */
.input-row { margin: 4px 0; }
.add-btn {
display: inline-block;
padding: 6px 12px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
}
.add-btn:hover { background: #0056b3; }
</style>
</head>
<body>
<!-- 基础列表（前 10 项） -->
<div class="group">
<div class="input-row"><label>项目 1：<input type="text" name="item_1"></label></div>
<div class="input-row"><label>项目 2：<input type="text" name="item_2"></label></div>
<div class="input-row"><label>项目 3：<input type="text" name="item_3"></label></div>
<div class="input-row"><label>项目 4：<input type="text" name="item_4"></label></div>
<div class="input-row"><label>项目 5：<input type="text" name="item_5"></label></div>
<div class="input-row"><label>项目 6：<input type="text" name="item_6"></label></div>
<div class="input-row"><label>项目 7：<input type="text" name="item_7"></label></div>
<div class="input-row"><label>项目 8：<input type="text" name="item_8"></label></div>
<div class="input-row"><label>项目 9：<input type="text" name="item_9"></label></div>
<div class="input-row"><label>项目 10：<input type="text" name="item_10"></label></div>
</div>
<!-- 第一组扩展开关与按钮 -->
<input type="checkbox" id="show11" class="trigger">
<label for="show11" id="add11" class="add-btn">+ 添加 10 项</label>
<!-- 第二组（11–20） -->
<div class="group">
<div class="input-row"><label>项目 11：<input type="text" name="item_11"></label></div>
<div class="input-row"><label>项目 12：<input type="text" name="item_12"></label></div>
<div class="input-row"><label>项目 13：<input type="text" name="item_13"></label></div>
<div class="input-row"><label>项目 14：<input type="text" name="item_14"></label></div>
<div class="input-row"><label>项目 15：<input type="text" name="item_15"></label></div>
<div class="input-row"><label>项目 16：<input type="text" name="item_16"></label></div>
<div class="input-row"><label>项目 17：<input type="text" name="item_17"></label></div>
<div class="input-row"><label>项目 18：<input type="text" name="item_18"></label></div>
<div class="input-row"><label>项目 19：<input type="text" name="item_19"></label></div>
<div class="input-row"><label>项目 20：<input type="text" name="item_20"></label></div>
</div>
<!-- 第二组扩展开关与按钮 -->
<input type="checkbox" id="show21" class="trigger">
<label for="show21" id="add21" class="add-btn">+ 添加 10 项</label>
<!-- 第三组（21–30），依此类推…… -->
<div class="group">
<div class="input-row"><label>项目 21：<input type="text" name="item_21"></label></div>
<div class="input-row"><label>项目 22：<input type="text" name="item_22"></label></div>
<!-- ……省略其余项，实际中补全至 100 -->
</div>
</body>
</html>✅ 关键要点说明：
- 所有 <input> 字段必须预置在 HTML 中，CSS 仅控制显隐，不创建新节点；
- 使用 <label for="id"> 关联复选框，确保点击文字即可触发（无障碍友好）；
- ~ 选择器要求目标元素位于触发器之后且同级，因此 HTML 结构顺序至关重要；
- 每组 group 和对应 add-btn 需严格按顺序排列，否则样式失效；
- 复选框本身设为 display: none（或用 opacity:0 + position:absolute 隐藏），避免视觉干扰。
⚠️ 注意事项：
立即学习“Java免费学习笔记（深入）”；
- 此方案本质是“静态展开”，无法真正新增未预定义的字段；若业务需无限扩容或后端动态生成项，JavaScript 仍是唯一可靠选择；
- 浏览器兼容性良好（支持 IE9+），但 :checked 在部分旧版 Android WebView 中存在 bug，建议测试目标环境；
- 表单提交时，所有 <input>（包括隐藏项）仍会随请求发送，后端需忽略空值或做校验；
- 若需支持键盘操作（如 Tab 键导航），应为隐藏复选框添加 tabindex="0" 并监听 Enter/Space 键（但已超出纯 CSS 范畴）。
综上，该方案是在零 JavaScript 约束下的务实妥协——它牺牲了真正的动态性，换取了确定性、可审计性与极致兼容性。对于固定上限（如 100 项）且交互简单的表单场景，不失为一种优雅而可靠的纯 CSS 解决方案。
