实现按Escape键取消所有复选框选中状态（含非表单场景）

原代码的问题在于仅针对表单内name="checkBox"的复选框操作，要覆盖所有复选框（包括纯CSS菜单用的无表单复选框），可以按以下方式修改：

核心思路 #

直接获取页面上所有<input type="checkbox">元素，遍历并取消它们的选中状态，无需依赖表单或特定name属性。

修改后的完整代码 #

HTML示例（包含表单内和表单外的复选框） #

<form> 
  <input type="checkbox" name="checkBox" >one<br> 
  <input type="checkbox" name="checkBox" >two<br> 
  <input type="checkbox" name="checkBox" >three<br> 
  <input type="checkbox" name="checkBox" >four<br> 
  <input type=button name="CheckAll" value="Select_All" onClick="check(true)"> 
  <input type=button name="UnCheckAll" value="UnCheck All Boxes" onClick="check(false)"> 
</form>

<!-- 表单外的复选框（用于纯CSS菜单） -->
<input type="checkbox" id="menuToggle">
<label for="menuToggle">菜单开关</label>
<div class="menu">纯CSS菜单内容</div>

JavaScript代码 #

// 通用的全选/取消全选函数，适配所有复选框
function check(checked) {
  // 获取页面上所有复选框元素
  const checkboxes = document.querySelectorAll('input[type="checkbox"]');
  checkboxes.forEach(checkbox => {
    checkbox.checked = checked;
  });
}

// 监听Escape按键事件
document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    // 调用取消全选函数
    check(false);
  }
});

优化点（可选） #

如果需要排除特定复选框（比如某些不需要Escape控制的），可以给这些复选框加一个类名（比如ignore-escape），然后修改选择器：

const checkboxes = document.querySelectorAll('input[type="checkbox"]:not(.ignore-escape)');

这样就不会处理带有ignore-escape类的复选框，更灵活适配你的需求。

内容的提问来源于stack exchange，提问作者Jovan Ralić