" class="article-image">
类型为**checkbox**的元素默认情况下呈现为框，当激活时会被选中（勾选），就像您可能在官方政府文件表格中看到的那样。确切的外观取决于浏览器运行的操作系统配置。通常情况下，它是一个正方形，但可能会有圆角。复选框允许您在表单中选择单个值以进行提交（或不提交）。
尝试一下
注意：单选按钮类似于复选框，但有一个重要的区别 - 具有相同名称的单选按钮被分组到一个集合中，一次只能选择一个单选按钮，而复选框允许您打开和关闭单个值。如果存在多个具有相同名称的控件，单选按钮允许您从所有控件中选择一个，而复选框允许您选择多个值。
值表示复选框值的字符串。它不会在客户端显示，但在服务器端，它是与复选框的name一起提交的数据中给出的value。以下是一个例子
html
在这个例子中，我们有一个名为subscribe，值为newsletter。当提交表单时，数据名称/值对将是subscribe=newsletter。
如果省略了value属性，复选框的默认值为on，因此在这种情况下提交的数据将是subscribe=on。
注意：如果复选框在提交其表单时未选中，则不会将名称或值提交到服务器。没有 HTML 仅方法来表示复选框的未选中状态（例如value=unchecked）。如果您希望在复选框未选中时提交复选框的默认值，您可以包含 JavaScript 以在表单中创建一个，其值为一个表示未选中状态的值。
其他属性除了所有元素共有的通用属性之外，“checkbox”输入还支持以下属性。
checked
一个布尔属性，指示此复选框在默认情况下是否选中（页面加载时）。它不指示此复选框当前是否选中：如果复选框的状态发生改变，此内容属性不会反映该改变。（只有HTMLInputElement的checked IDL 属性被更新。）
注意：与其他输入控件不同，复选框的值只有在复选框当前为checked时才会包含在提交的数据中。如果是，则报告的值是复选框value属性的值，如果没有设置value，则为on。与其他浏览器不同，Firefox 默认情况下会跨页面加载保留的动态选中状态。使用autocomplete属性来控制此功能。
value
value属性是所有共享的属性；但是，它对类型为checkbox的输入具有特殊用途：当提交表单时，只有当前选中的复选框会被提交到服务器，并且报告的值是value属性的值。如果没有另外指定value，默认情况下为字符串on。这在上面的值部分中有说明。
使用复选框输入我们已经介绍了复选框的最基本用法。现在让我们看一下您需要了解的其他常见复选框相关功能和技术。
处理多个复选框我们上面看到的例子只包含一个复选框；在实际情况中，您很可能会遇到多个复选框。如果它们完全无关，则可以像上面那样分别处理它们。但是，如果它们都相关，事情就不那么简单了。
例如，在下面的演示中，我们包含了多个复选框，允许用户选择他们的兴趣（请参阅示例部分中的完整版本）。
html
在这个例子中，您会看到我们为每个复选框都指定了相同的name。如果选中了两个复选框，然后提交了表单，您将收到一个像这样的提交的名称/值对字符串：interest=coding&interest=music。当此字符串到达服务器时，您需要对它进行解析，而不是作为关联数组进行解析，因此会捕获所有interest的值，而不仅仅是最后一个值。例如，对于在 Python 中使用的一种技术，请参阅使用单个服务器端变量处理多个复选框。
默认情况下选中复选框要默认选中一个复选框，您需要给它一个checked属性。请参阅以下示例
html
为复选框提供更大的点击区域在上面的例子中，您可能已经注意到，您不仅可以通过点击复选框本身，还可以通过点击其关联的
除了无障碍访问之外，这也是在您的表单上正确设置
不确定状态复选框复选框可以处于**不确定**状态。 这可以通过 JavaScript 使用 HTMLInputElement 对象的 indeterminate 属性设置（无法使用 HTML 属性设置）。
jsinputInstance.indeterminate = true;
当 indeterminate 为 true 时，复选框在大多数浏览器中会在框中显示一条水平线（看起来有点像连字符或减号），而不是勾号/对勾。
注意：这纯粹是视觉上的变化。 它不会影响复选框的 value 是否在表单提交中使用。 这由 checked 状态决定，而与 indeterminate 状态无关。
此属性的用例并不多。 最常见的是，当一个复选框可以“拥有”多个子选项（它们也是复选框）时。 如果所有子选项都被选中，则拥有复选框也被选中，如果它们都被取消选中，则拥有复选框也被取消选中。 如果一个或多个子选项与其他子选项的状态不同，则拥有复选框处于不确定状态。
这可以在下面的示例中看到（感谢 CSS Tricks 提供的灵感）。 在此示例中，我们跟踪正在为食谱收集的食材。 当您选中或取消选中食材的复选框时，一个 JavaScript 函数会检查选中食材的总数。
如果没有任何食材被选中，则食谱名称的复选框将被设置为未选中。
如果选中了一两个食材，则食谱名称的复选框将被设置为 indeterminate。
如果所有三个食材都被选中，则食谱名称的复选框将被设置为 checked。
因此，在这种情况下，indeterminate 状态用于表明食材收集已开始，但食谱尚未完成。
jsconst overall = document.querySelector("#enchantment");
const ingredients = document.querySelectorAll("ul input");
overall.addEventListener("click", (e) => {
e.preventDefault();
});
for (const ingredient of ingredients) {
ingredient.addEventListener("click", updateDisplay);
}
function updateDisplay() {
let checkedCount = 0;
for (const ingredient of ingredients) {
if (ingredient.checked) {
checkedCount++;
}
}
if (checkedCount === 0) {
overall.checked = false;
overall.indeterminate = false;
} else if (checkedCount === ingredients.length) {
overall.checked = true;
overall.indeterminate = false;
} else {
overall.checked = false;
overall.indeterminate = true;
}
}
验证复选框支持 验证（提供给所有 ）。 但是，大多数 ValidityState 将始终为 false。 如果复选框具有 required 属性，但未选中，则 ValidityState.valueMissing 将为 true。
示例以下示例是我们在上面看到的“多个复选框”示例的扩展版本——它具有更多标准选项，以及一个“其他”复选框，当选中时，会导致一个文本字段出现，用于输入“其他”选项的值。 这是通过一个简单的 JavaScript 代码块实现的。 示例包括隐式标签， 直接位于
HTMLhtml
CSScsshtml {
font-family: sans-serif;
}
form {
width: 600px;
margin: 0 auto;
}
div {
margin-bottom: 10px;
}
fieldset {
background: cyan;
border: 5px solid blue;
}
legend {
padding: 10px;
background: blue;
color: cyan;
}
JavaScriptjsconst otherCheckbox = document.querySelector("#other");
const otherText = document.querySelector("#otherValue");
otherText.style.visibility = "hidden";
otherCheckbox.addEventListener("change", () => {
if (otherCheckbox.checked) {
otherText.style.visibility = "visible";
otherText.value = "";
} else {
otherText.style.visibility = "hidden";
}
});
技术概述
值
表示复选框值的字符串。
事件
change 和 input
支持的通用属性
checked
IDL 属性
checked、indeterminate 和 value
DOM 接口
HTMLInputElement
方法
select()
隐式 ARIA 角色
checkbox
规范规范HTML 标准 # checkbox-state-(type=checkbox)浏览器兼容性BCD 表格仅在浏览器中加载
另请参阅
:checked、:indeterminate：允许您根据复选框当前状态对其进行样式设置的 CSS 选择器
HTMLInputElement：实现 元素的 HTML DOM API
表单控件的 CSS 属性兼容性表