为什么未选中的复选框的值为 'on'？

Question

（也在 JSfiddle 中复制）

给定一个 HTML 复选框：

<input type="checkbox">

显示的复选框没有勾号：

记录元素的值：

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

日志 on，即使该复选框未选中。

为什么复选框未选中时复选框的值为'on'？

如何获得正确的值？

Answer 1

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

Answer 2

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

你真正想做的是：

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

Answer 3

复选框的值是常量。它不会改变（除非你用 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>

Why does an unchecked checkbox have a value of 'on'?