复选框表单提交后无法全屏显示指定文本的技术问题

原代码核心问题 #

• isChecked()函数里if/else分支的return语句直接终止了函数执行，后面的事件监听代码永远不会运行
• 表单提交时return true会触发页面刷新，导致替换页面内容的逻辑根本来不及生效
• HTML存在语法错误：class="workout>"引号闭合错误，<input>错误包裹文本（input是自闭合标签，文本需放在标签外或用<label>关联）
• 提交按钮的onchange事件引用了不存在的formName表单ID，会抛出错误

修复后的完整代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Checklist</title>
  <link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
  <h1>Checklist</h1>
  <form id="todoForm">
    <div class="workout">
      <input type="checkbox" id="workout" name="todo1" value="workout">
      <label for="workout">workout</label>
    </div>
    <div class="meeting">
      <input type="checkbox" id="meeting" name="todo2" value="meeting">
      <label for="meeting">meeting</label>
    </div>
    <div class="lunch">
      <input type="checkbox" id="lunch" name="todo3" value="lunch">
      <label for="lunch">lunch</label>
    </div>
    <div class="school">
      <input type="checkbox" id="school" name="todo4" value="school">
      <label for="school">class</label>
    </div>
    <div>
      <input class="submit" id="submit" type="submit" value="Submit">
    </div>
  </form>

  <script>
    // 获取表单元素
    const form = document.getElementById('todoForm');
    
    // 监听表单提交事件
    form.addEventListener('submit', function(e) {
      // 阻止表单默认提交行为，避免页面刷新
      e.preventDefault();
      
      // 获取所有复选框的勾选状态
      const workout = document.getElementById('workout').checked;
      const meeting = document.getElementById('meeting').checked;
      const lunch = document.getElementById('lunch').checked;
      const school = document.getElementById('school').checked;
      
      // 判断是否有至少一个复选框被勾选
      if (!workout && !meeting && !lunch && !school) {
        alert('Please check a box');
      } else {
        // 替换页面内容为全屏文本，添加样式确保居中全屏
        document.body.innerHTML = '<h1 style="width:100vw; height:100vh; margin:0; display:flex; align-items:center; justify-content:center;">Enjoy your day.</h1>';
      }
    });
  </script>
</body>
</html>

关键修复说明 #

1. HTML修正：
   • 修复了class属性的引号错误
   • 用<label>标签正确关联复选框和文本，提升可访问性
   • 移除了无效的onchange事件和注释的无效代码
2. JavaScript逻辑优化：
   • 使用表单的submit事件监听替代内联onsubmit函数，避免页面默认刷新
   • 直接在事件回调中完成状态判断和页面内容替换，逻辑更清晰
   • 添加e.preventDefault()阻止表单默认提交行为，确保页面内容替换生效
   • 给替换后的标题添加了简单的全屏样式，确保文本居中全屏显示

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