摘要：在本教程中，您将学习如何使用 JavaScript 测试复选框是否选中，获取选定复选框的值以及选择/取消选择所有复选框。
创建 HTML 复选框要创建复选框，可以使用 元素，其type 为checkbox，如下所示
Accept Code language: HTML, XML (xml)最佳实践是始终将复选框与标签关联，以提高可用性和可访问性。通过这样做，单击标签也会选中或取消选中复选框。
Accept
Code language: HTML, XML (xml)或
Code language: HTML, XML (xml)请注意，标签的 for 属性的值必须与复选框的 id 相匹配。
以下方法有效，但属于不良实践，因此应避免使用
AcceptCode language: HTML, XML (xml)检查复选框是否选中复选框有两种状态：选中和未选中。
要获取复选框的状态，请执行以下步骤
首先，使用 DOM 方法（例如getElementById() 或querySelector()）选择复选框。然后，访问复选框元素的checked 属性。如果其checked 属性为true，则复选框已选中；否则，未选中。请参见以下示例
Accept
Code language: HTML, XML (xml)在此示例中
首先，创建 HTML 复选框元素
Accept
Code language: HTML, XML (xml)其次，选择 id 为#accept 的复选框并检查checked 属性
const cb = document.querySelector('#accept');
console.log(cb.checked);Code language: JavaScript (javascript)由于复选框未选中，您将在控制台中看到false
falseCode language: JavaScript (javascript)考虑另一个示例
Accept
Code language: HTML, XML (xml)在此示例中，选择器#accept:checked 选择 id 为#accept 且具有checked 属性的元素。例如，它匹配以下元素
AcceptCode language: HTML, XML (xml)但不匹配以下元素
AcceptCode language: HTML, XML (xml)因此，如果 id 为#accept 的复选框元素已选中，document.querySelector() 将返回它。在控制台窗口中，您将看到值false，因为复选框未选中
falseCode language: JavaScript (javascript)获取复选框的值以下页面显示了一个复选框和一个按钮。单击按钮时，您将在控制台窗口中看到复选框的值
Accept
Code language: HTML, XML (xml)获取复选框的value 属性时，无论复选框是否选中，您始终会获得'on' 字符串。
获取多个选定复选框的值以下页面显示了三个复选框。如果您选择一个或多个复选框并单击按钮，它将显示所选复选框的值
Select your favorite colors:
Code language: HTML, XML (xml)工作原理。
在 HTML 中，我们创建了三个名称相同（color）但值不同的复选框元素
Code language: HTML, XML (xml)在 JavaScript 中
首先，将单击事件处理程序添加到按钮
const btn = document.querySelector('#btn');
btn.addEventListener('click', (event) => {
// ...
}); Code language: JavaScript (javascript)其次，在单击事件处理程序内使用document.querySelectorAll() 方法选择选定的复选框
let checkboxes = document.querySelectorAll('input[name="color"]:checked');Code language: JavaScript (javascript)第三，将选定复选框的值推送到数组中
let values = [];
checkboxes.forEach((checkbox) => {
values.push(checkbox.value);
});
alert(values);Code language: JavaScript (javascript)演示
选中/取消选中所有复选框以下页面有三个复选框和一个按钮。单击按钮时，如果复选框已选中，它们将被取消选中，反之亦然
Code language: HTML, XML (xml)工作原理
首先，定义check() 函数，该函数选中或取消选中名称为"color" 的所有复选框
function check(checked = true) {
const checkboxes = document.querySelectorAll('input[name="color"]');
checkboxes.forEach((checkbox) => {
checkbox.checked = checked;
});
}Code language: JavaScript (javascript)单击按钮时，它会选中所有复选框。而且，如果您再次单击按钮，它应该取消选中所有复选框。要执行此切换，您需要在每次单击事件触发时重新分配单击事件处理程序。
其次，选择#btn 按钮并将checkAll() 函数分配给按钮的onclick 属性
const btn = document.querySelector('#btn');
btn.onclick = checkAll;Code language: JavaScript (javascript)第三，定义checkAll() 函数，该函数选中所有复选框
function checkAll() {
check();
this.onclick = uncheckAll;
}
Code language: JavaScript (javascript)最后，定义uncheckAll() 函数，该函数取消选中所有复选框
function uncheckAll() {
check(false);
this.onclick = checkAll;
}Code language: JavaScript (javascript)演示
动态创建复选框以下示例演示了如何使用 JavaScript 动态创建复选框
Code language: HTML, XML (xml)输出
首先，定义一个包含三个字符串的数组。在实际应用中，您可能拥有来自 API 调用结果的数组
const colors = ["Red","Green","Blue"];Code language: JavaScript (javascript)其次，遍历数组元素并执行以下操作
1) 为每个复选框生成一个唯一的 id
const id = `color-${color}`;Code language: JavaScript (javascript)2) 创建一个标签并将 id 分配给 for 属性
const label = document.createElement('label');
label.setAttribute("for", id);Code language: JavaScript (javascript)3) 创建一个复选框
const checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "color";
checkbox.value = color;
checkbox.id = id;Code language: JavaScript (javascript)4) 将复选框放置在标签内
label.appendChild(checkbox);Code language: CSS (css)5) 创建一个文本节点并将其附加到标签
label.appendChild(document.createTextNode(color));Code language: CSS (css)6) 将标签添加到根元素
document.querySelector("#root").appendChild(label);Code language: CSS (css)以下示例也像上面的示例一样动态生成复选框
Code language: HTML, XML (xml)在此示例中
首先，使用数组map() 方法和模板字面量 生成标签和复选框元素。其次，使用字符串join() 方法将 HTML 字符串连接成单个 HTML。第三，将 HTML 附加到#root 元素。总结使用 元素，其 type 为checkbox 来创建复选框元素。将复选框放置在标签元素内，以提高可用性和可访问性。使用checkbox.checked 属性或:check 选择器测试复选框是否选中。获取value 属性以获取复选框的值。本教程对您有帮助吗？ 是 否 发送 取消