HTML 复选框：多个值、required 与 indeterminate

HTML 参考手册

创建时间 2026-10-30 最后修改 2026-10-30

HTML <input type="checkbox"> 允许每个选项独立选择或清除。仅提交已选中的复选框的名称和值；未选中的选项不会作为 false 或空字符串发送，而是从提交数据中省略。

读取具有相同名称的多个值

与单选按钮不同，可以一起选择具有相同 name 的复选框。它们的值在同一个名称下重复，因此需要读取全部值。在 JavaScript 的 FormData 实例上使用 getAll，并检查服务器框架处理多个值的规则。

name 用于标识字段；value 是在选中时提交的内容。省略 value 将使用默认字符串 on，因此应指定值以区分选项。为每个复选框提供唯一的 id 以标注其标签。

完整示例：多选、必选项检查，以及排除条目

将此代码保存为 checkbox-demo.html 并在浏览器中打开。它显示实际的表单条目，而不是将它们发送到服务器。比较即使选中，禁用选项如何被排除。

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>复选框提交值</title>
  <style>pre { white-space: pre-wrap; overflow-wrap: anywhere; }</style>
</head>
<body>
  <h1>复选框练习</h1>
  <form id="demo">
    <fieldset>
      <legend>偏好的颜色（可多选）</legend>
      <input type="checkbox" id="blue" name="color" value="blue" checked>
      <label for="blue">蓝色</label>
      <input type="checkbox" id="red" name="color" value="red">
      <label for="red">红色</label>
      <input type="checkbox" id="locked" name="color" value="green" checked disabled>
      <label for="locked">绿色（禁用）</label>
    </fieldset>
    <p>
      <input type="checkbox" id="ready" name="ready" value="yes" required>
      <label for="ready">练习准备完成（必选）</label>
    </p>
    <button type="submit">查看值</button>
    <button type="reset">重置</button>
    <button type="button" id="partial">将蓝色显示为部分选择</button>
  </form>
  <pre id="result" aria-live="polite"></pre>
  <script>
    const form = document.getElementById('demo');
    const result = document.getElementById('result');
    const blue = document.getElementById('blue');
    form.addEventListener('submit', (event) => {
      event.preventDefault();
      result.textContent = JSON.stringify(Array.from(new FormData(form).entries()), null, 2);
    });
    document.getElementById('partial').addEventListener('click', () => {
      blue.indeterminate = true;
    });
    form.addEventListener('reset', () => {
      result.textContent = '';
      blue.indeterminate = false;
    });
  </script>
</body>
</html>