required 对 checkbox 仅作用于单个元素，表示该框必须勾选；实现“至少选一项”需 js 手动校验同名复选框的 checked 数量，并服务端二次验证。
required 属性对 <input type="checkbox"> 的实际作用范围
required 用在单个复选框上，只表示“这个复选框必须被勾选”，不是“这一组里至少一个要选”。也就是说，<input type="checkbox" name="hobby" value="reading" required> 的语义是：如果这个框存在，用户必须打勾；它不关心同名的其他复选框是否选中。
常见错误是给每个同名 checkbox 都加 required，结果导致用户必须把全部都勾上才能提交——这显然不是“至少选一项”的需求。
- 浏览器原生校验只按 DOM 元素粒度触发，不识别 name 相同的 checkbox 组逻辑
-
required在 checkbox 上生效条件是：该元素未被勾选且checked属性不存在（也不受 JS 设置影响） - 即使一组 checkbox 共享
name="tags"，每个仍是独立校验目标
用 JavaScript 实现“至少选一项”的最小可行校验
必须监听表单的 submit 事件，在提交前手动检查同名 checkbox 的勾选状态。不能依赖 required 原生行为。
关键点在于：获取所有 name 相同的 checkbox，统计其中 checked === true 的数量。
- 用
document.querySelectorAll('input[name="interests"]:checked')直接选中已勾选项，比遍历更简洁 - 校验失败时调用
event.preventDefault()阻止提交，并聚焦第一个 checkbox（提升可访问性） - 避免用
form.checkValidity()—— 它对 checkbox 组无效，只会返回true即使全未选
const form = document.querySelector('form');
form.addEventListener('submit', function (e) {
const checkedCount = document.querySelectorAll('input[name="skills"]:checked').length;
if (checkedCount === 0) {
e.preventDefault();
alert('请至少选择一项技能');
document.querySelector('input[name="skills"]').focus();
}
});
配合 HTML5 Constraint Validation API 的增强写法
可以利用 setCustomValidity() 让浏览器原生提示框显示自定义消息，同时保持 focus 和键盘导航一致性。
- 给任一 checkbox（通常是第一个）调用
setCustomValidity('请至少选择一项') - 每次勾选/取消勾选时动态更新 validity 状态：
if (checkedCount > 0) input.setCustomValidity('') - 注意：必须对同一组中所有 checkbox 都绑定 change 事件，否则状态不同步
- 不要对每个 checkbox 单独设
required，否则会干扰自定义校验逻辑
服务端永远要做二次校验
前端校验只是用户体验优化，用户禁用 JS 或绕过表单提交（如 curl、Postman）时，required 和 JS 校验完全失效。
后端收到 skills[] 类似参数时，必须检查数组长度是否大于 0，空数组或缺失字段都要明确拒绝。
- Node.js/Express 示例：
if (!Array.isArray(req.body.skills) || req.body.skills.length === 0) - PHP 中注意
$_POST['skills']可能为null或字符串（当只选一个且未用[]命名时） - 即使前端用了
name="skills[]"，也要防止单值字符串被误传
真正起作用的永远是服务端逻辑，前端只是减少无效请求和改善反馈路径。Checkbox 组的“至少一项”约束，从来就不是靠 required 能兜住的事。
