如何设置HTML表单至少勾选一个复选框？

方案一：HTML原生属性校验（无需JS） #

把两个复选框的name设为同一个值（比如timeslot），再给它们添加required属性。浏览器会自动校验这一组复选框至少勾选一个，同时允许勾选两个选项。

修改后的代码：

<p>Please select your preferred time slot:</p>
<input type="checkbox" id="am" name="timeslot" value="AM" required>
<label for="am">AM (09:00-13:00)</label><br>
<input type="checkbox" id="pm" name="timeslot" value="PM" required>
<label for="pm">PM (13:00-18:00)</label><br>

原理：相同name的复选框属于同一组，required属性作用于整组，只要组内有一个选项被勾选就满足校验要求。

方案二：JavaScript自定义校验 #

如果需要自定义提示内容或兼容旧浏览器，可以通过JS监听表单提交事件，手动完成校验：

<form id="timeForm">
  <p>Please select your preferred time slot:</p>
  <input type="checkbox" id="am" name="am" value="AM">
  <label for="am">AM (09:00-13:00)</label><br>
  <input type="checkbox" id="pm" name="pm" value="PM">
  <label for="pm">PM (13:00-18:00)</label><br>
  <button type="submit">提交</button>
</form>

<script>
document.getElementById('timeForm').addEventListener('submit', function(e) {
  const amChecked = document.getElementById('am').checked;
  const pmChecked = document.getElementById('pm').checked;
  
  if (!amChecked && !pmChecked) {
    e.preventDefault(); // 阻止表单提交
    alert('请至少选择一个时间段'); // 自定义提示信息
  }
});
</script>

这种方法能灵活控制提示样式和交互逻辑，适合需要定制化体验的场景。

内容的提问来源于stack exchange，提问作者mayo09876