html 表单默认不提交未勾选的复选框，导致后端无法区分“用户明确拒绝”和“字段未参与提交”。本文提供一种简洁可靠的方案：统一使用 name="schedule" + 语义化 value="day-hour" 命名约定，并在后端通过预定义时间表结构还原完整布尔状态矩阵。
在构建用户周可用性配置表单（如预约系统、排班工具）时，常需处理数十乃至上百个复选框。一个核心挑战是：浏览器仅将已勾选的 的 value 提交至服务端；未勾选项完全静默，不产生任何字段数据。这意味着，若直接依赖 name="schedule" 提交，后端收到的只是一个稀疏数组（例如 ["Monday-7", "Tuesday-9"]），而无法得知其余 198 个时段是否被用户主动取消——这在业务逻辑中至关重要（例如，“未勾选=不可用”，而非“未填写=待确认”）。
✅ 推荐方案：语义化 value + 后端结构化还原
前端无需为每个复选框添加隐藏域（那将导致 200+ 个冗余 ，维护困难且违反语义），而是采用扁平化、可解析的 value 命名规范：
? 关键设计点：value 格式为 "Day-Hour"（首字母大写、连字符分隔），确保唯一性与可解析性；name 统一为 "schedule"，便于后端批量接收。
? 后端解析逻辑（以 TypeScript/Node.js 为例）
服务端接收到的是字符串数组 schedule: string[]（如 ["Monday-7", "Tuesday-9", "Friday-14"]），我们通过预定义的完整时间维度进行“补全映射”：
const DAYS = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
const HOURS = Array.from({ length: 17 }, (_, i) => 7 + i); // 7–23 点（共17小时）
type UserSchedule = {
day: string;
times: { time: number; free: boolean }[];
};
// 解析提交数据
function parseSchedule(scheduleStringArray: string[]): UserSchedule[] {
return DAYS.map(day => ({
day,
times: HOURS.map(hour => ({
time: hour,
free: scheduleStringArray.includes(`${day}-${hour}`),
})),
}));
}
// 示例调用
const rawFormData = ["Monday-7", "Monday-8", "Friday-14"];
const fullSchedule = parseSchedule(rawFormData);
// → [
// { day: "Monday", times: [{time:7,free:true}, {time:8,free:true}, {time:9,free:false}, ...] },
// { day: "Tuesday", times: [{time:7,free:false}, ...] },
// ...
// ]⚠️ 注意事项与最佳实践
- 大小写与格式必须严格一致：前后端 value 字符串（如 "Monday-7"）须完全匹配，建议前端生成时使用 day.charAt(0).toUpperCase() + day.slice(1).toLowerCase() 规范化。
- 避免空格与特殊字符：value 中禁用空格、中文、斜杠等，仅用 ASCII 字母、数字、连字符，保障 URL 编码与解析稳定性。
- 性能考量：200 个时段生成的数组极小（
- 扩展性支持：如需支持“部分不可用时段标注原因”，可在 value 中追加编码（如 "Monday-7-reason1"），或改用 JSON 字符串（但需注意长度与 XSS 防护）。
该方案以最小前端侵入性换取最大后端可控性，既符合 HTML 表单原生行为，又规避了隐藏域泛滥、重复 name 冲突等常见陷阱，是大规模布尔型多选项采集场景下的稳健实践。
