如何通过keydown属性操作复选框？原生JS实现无需jQuery

原代码存在以下核心问题，会导致功能无法正常运行：

• 事件对象传参错误：绑定事件时传入的this是复选框DOM元素，并非键盘事件对象，函数内直接读取全局event兼容性差，且e.key的写法完全错误（此时e是复选框元素，不存在key属性）
• 无状态校验：已勾选的复选框按回车会重复追加相同值，已取消勾选的按退格会执行无意义的替换操作
• 字符串替换逻辑漏洞：直接用replace匹配移除value会出现误替换，例如移除302时会误将3021中的302字符删掉，还会残留多余空格
• 未阻止默认行为：按退格键时部分浏览器会触发页面回退，按回车可能触发表单默认提交
• 基础语法问题：循环变量i未声明存在全局污染，CSS中font-weight属性错误添加了px单位
• document.write风险：页面加载完成后调用该方法会覆盖整个页面内容

修正后完整可运行代码 #

<!DOCTYPE html>
<html>
<head>
  <title>Checkbox Attendance</title>
  <style>
    li {
      max-width: 800px;
      word-wrap: break-word;
      font-size: 27px;
      margin-left: 200px;
      color: blue;
      margin-top: 100px;
    }
    h1 {
      color: crimson;
      font-weight: 1000;
      font-size: 60px;
      margin-left: 500px;
    }
  </style>
</head>
<body style="background-color: blanchedalmond;">
  <h1>Attendance</h1>
  <li id="dis">Present Students<br></li><br>

  <script>
    const disBox = document.getElementById('dis');
    const contentPrefix = 'Present Students<br>';

    // 渲染复选框列表
    for (let i = 301; i < 359; i++) {
      const checkbox = document.createElement('input');
      checkbox.type = 'checkbox';
      checkbox.value = i;
      checkbox.onkeydown = function(ev) {
        handleCheckboxKey(ev, this);
      }
      document.body.appendChild(checkbox);
      document.body.appendChild(document.createTextNode(i));
      document.body.appendChild(document.createElement('br'));
    }

    function handleCheckboxKey(ev, checkbox) {
      const pressedKey = ev.key;
      // 回车勾选逻辑
      if (pressedKey === 'Enter') {
        ev.preventDefault();
        if (checkbox.checked) return;
        checkbox.checked = true;
        disBox.innerHTML += ` ${checkbox.value}`;
      }
      // 退格取消逻辑
      if (pressedKey === 'Backspace') {
        ev.preventDefault();
        if (!checkbox.checked) return;
        checkbox.checked = false;
        // 精确匹配移除对应值，避免字符串误替换
        const existValues = disBox.innerHTML
          .replace(contentPrefix, '')
          .trim()
          .split(/\s+/)
          .filter(Boolean);
        const filteredValues = existValues.filter(val => val !== checkbox.value);
        disBox.innerHTML = contentPrefix + (filteredValues.length ? ' ' + filteredValues.join(' ') : '');
      }
    }
  </script>
</body>
</html>

关键修正点说明 #

• 改用DOM API创建节点渲染复选框，替代document.write避免页面覆盖风险
• 事件处理函数同时接收事件对象和复选框元素，兼容全浏览器事件取值
• 增加勾选状态前置判断，避免重复添加、重复移除的无效操作
• 已选值通过数组拆分、精确过滤的方式处理，彻底解决字符串替换误匹配问题
• 调用ev.preventDefault()阻止按键默认行为，避免触发浏览器回退、表单提交等意外操作
• 修正CSS语法错误、循环变量作用域问题

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