当 html 表单提交时，未勾选的复选框不会发送任何数据，导致后端无法区分“用户明确取消选择”和“该选项根本未被渲染”。本文提供一种简洁、可扩展的方案：将结构化键值信息编码进 `value` 属性，并在服务端解析还原完整布尔状态矩阵。
在构建用户可用性配置（如周计划排班）时，常需处理上百个逻辑关联的复选框（例如 7 天 × 16 个时段 = 112 个选项）。若直接使用统一 name="schedule"，浏览器仅提交已勾选项的 value 值（如 "Monday-7"），而所有未勾选项完全静默——这使后端无法得知某时段是“用户主动取消”还是“前端漏渲染”，更无法生成完整的 day → time → free: boolean 结构。
✅ 推荐方案：语义化 value 编码 + 后端全量推导
不依赖隐藏域（因其在多值同名场景下易冲突），而是将业务语义直接嵌入 checkbox 的 value，再由后端基于预设维度重建完整状态图谱：
前端 HTML（精简示意）：
<fieldset> <legend>Monday</legend> <label><input type="checkbox" name="schedule" value="Monday-7"> 7–8</label> <label><input type="checkbox" name="schedule" value="Monday-8"> 8–9</label> <!-- ...更多时段 --> </fieldset> <fieldset> <legend>Tuesday</legend> <label><input type="checkbox" name="schedule" value="Tuesday-7"> 7–8</label> <!-- ... --> </fieldset>
? 注意：value 格式为 {Day}-{Hour}（如 Monday-7），大小写与后端约定一致，便于解析；无需隐藏域，避免同名 input 冲突风险。
后端解析（以 TypeScript/Node.js 为例）：
// 前端提交的 schedule 字段为 string[]，如 ["Monday-7", "Tuesday-8", "Wednesday-9"]
const parseSchedule = (scheduleValues: string[]): UserSchedule[] => {
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
const hours = Array.from({ length: 16 }, (_, i) => 7 + i); // 7,8,...,22
// 构建快速查找 Set，提升性能
const selectedSet = new Set(scheduleValues);
return days.map(day => ({
day,
times: hours.map(hour => ({
time: hour,
free: selectedSet.has(`${day}-${hour}`),
})),
}));
};⚠️ 关键注意事项
- 命名一致性：前后端对 day 名称（如 Monday vs monday）、分隔符（-）、时间单位（7 表示 7:00–8:00）必须严格统一；
- 性能优化：对 200+ 选项，使用 Set 而非 Array.includes() 可将查找复杂度从 O(n) 降至 O(1)；
- 扩展性保障：新增一天或时段只需更新 days/hours 数组，无需修改 HTML 或路由逻辑；
- 空提交兼容：若用户未勾选任何框，scheduleValues 为空数组，free 全为 false，逻辑依然健壮。
此方案摒弃了隐藏域的脆弱性，用声明式 value 设计换取后端的确定性建模能力，特别适合高维布尔配置场景——清晰、低维护、零歧义。
