如何为一组checkbox绑定onblur事件实现失焦校验？

这一限制完全可以通过原生HTML和Vanilla JS解决，不存在无法实现的问题。

原有方案失效原因 #

• 仅给最后一个checkbox绑定blur事件：用户在组内切换焦点时（比如按shift+tab切到前一个选项），最后一个checkbox的blur会提前触发，但此时用户并未离开整个选项组，属于误触发。
• fieldset绑定onblur无响应：因为blur事件本身不支持冒泡，内部子元素的blur事件不会向上传递到父级fieldset节点，因此绑定的回调不会执行。

可行实现方案 #

核心思路 #

使用支持冒泡的focusout事件替代blur，绑定到fieldset容器上，每次组内元素触发focusout时，延迟极短时间判断当前页面聚焦元素是否仍在当前checkbox组内：如果不在，说明用户已经离开整个选项组，此时再执行校验逻辑即可。

完整代码示例 #

<!-- HTML部分 -->
<fieldset id="checkboxGroup">
  <label><input type="checkbox" name="userOption" value="1"> 选项1</label>
  <label><input type="checkbox" name="userOption" value="2"> 选项2</label>
  <label><input type="checkbox" name="userOption" value="3"> 选项3</label>
  <p class="error-tip" style="display: none; color: #dc3545; margin: 8px 0 0 0;">请至少选择一个选项</p>
</fieldset>

// Vanilla JS部分
const checkGroup = document.getElementById('checkboxGroup');
const errorTip = checkGroup.querySelector('.error-tip');

// 绑定冒泡的focusout事件
checkGroup.addEventListener('focusout', () => {
  // 延迟10ms获取新的聚焦元素，避免同组内切换焦点时误判
  setTimeout(() => {
    const currentActive = document.activeElement;
    // 新聚焦元素不在当前组内，说明用户已离开选项组
    if (!checkGroup.contains(currentActive)) {
      const hasChecked = checkGroup.querySelector('input[type="checkbox"]:checked') !== null;
      errorTip.style.display = hasChecked ? 'none' : 'block';
    }
  }, 10);
});

补充优化 #

你也可以给组内所有checkbox添加required属性，原生表单校验会自动识别同一name的checkbox组，只要有一个选项被选中，整组的校验就会自动通过，不需要手动判断选中状态，配合上述focusout逻辑可以直接调用checkValidity()方法触发原生校验。

内容的提问来源于stack exchange，提问作者L. Wallach