为什么未选中的复选框的值为“on”？答案

【问题标题】：Why does an unchecked checkbox have a value of 'on'?为什么未选中的复选框的值为“on”？
【发布时间】：2021-04-07 16:58:55
【问题描述】：

（同样复制于JSfiddle）

给定一个 HTML 复选框：

<input type="checkbox">

复选框显示为不打勾：

记录元素的值：

console.log(document.querySelector('input').value)

记录on，即使复选框未选中。

当未选中复选框时，为什么复选框的值是“on”？

我怎样才能得到正确的值？

【问题讨论】：

on 是默认值，因此它是正确的。如果要检查复选框是否被选中，请使用checked 属性而不是value。请参阅 jsFiddle 复选框的工作原理。

【解决方案1】：

复选框的值是恒定的。它不会改变（除非你用 JavaScript 改变它）。如果不指定值，则默认为on。

该值与是否检查输入无关。

在传统的表单提交中，只会提交成功的控件，而复选框不会成功，除非它们被选中。在服务器上，您根据是否提交值来确定是否检查它们。

您不会根据输入的选中状态获得不同的值。

如果您想确定在客户端 JavaScript 中是否选中了复选框，请查看 checked 属性，而不是 value 属性。

document.querySelectorAll("input").forEach(input => console.log({
  value: input.value,
  checked: input.checked
}));

<input type="checkbox" value="on">
<input type="checkbox" value="off" checked>
<input type="checkbox">
<input type="checkbox" value="foo" checked>

【讨论】：

如果不是勾选复选框，value的目的是什么？
@mikemaccana — 这样您就可以知道选中了一组复选框中的哪一个。
您能进一步解释一下吗？你是说value 与checked 有某种关联，但仅适用于多个复选框？
考虑jsbin.com/puqociquco/1/edit?html,output，然后考虑将数据提交到服务器时animal 和colour 数组的外观。
@mikemaccana — 猫不是关键。提交后，服务器会得到类似animals = ['cats', 'bunnies'] 的信息（如果这两项是检查的话）。

【解决方案2】：

"如果省略了 value 属性，则复选框的默认值为 on，因此在这种情况下提交的数据将是 subscribe=on。"

【讨论】：

但是为什么复选框没有被选中？
这种行为是由 W3C 标准定义的，可能是因为所有 input 元素都是为 form 设计的从一开始，就当成事实吧。当您希望它按预期运行时添加了“值”属性。

【解决方案3】：

“开”是复选框value 属性的默认值。当您发送表单并选中复选框时，您将收到一个名称/值对 (checkboxname=on)。这就是您需要value 属性（当然还有name 属性）的地方。

你真正想做的是：

console.log(document.querySelector('input').checked)

【讨论】：