HTML | DOM 输入复选框选中的属性

在HTML中，复选框是一种特殊的输入字段，它允许用户选择一个或多个选项。在DOM中，我们可以使用JavaScript来获取所有选中的选项以及它们的属性。

获取所有选中的选项

要获取所有选中的选项，我们需要找到所有的复选框，并使用一个循环来判断哪些复选框被选中。在每次循环中，我们可以使用 checked 属性来检查复选框是否选中：

let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checkedOptions = [];

for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkedOptions.push(checkboxes[i]);
  }
}

在上面的代码中，我们首先使用 querySelectorAll 方法来找到所有的复选框。然后我们创建一个数组 checkedOptions 来存储选中的选项。在循环中，我们使用 checked 属性来检查每个复选框是否选中，并将选中的复选框添加到 checkedOptions 数组中。

获取选中选项的属性值

一旦我们有了选中的选项，我们可以使用另一个循环来获取它们的属性值。在每次循环中，我们可以使用 getAttribute 方法来获取选项的属性：

let checkboxes = document.querySelectorAll('input[type="checkbox"]');
let checkedOptions = [];

for (let i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].checked) {
    checkedOptions.push(checkboxes[i]);
  }
}

let values = [];

for (let i = 0; i < checkedOptions.length; i++) {
  values.push(checkedOptions[i].getAttribute('value'));
}

在上面的代码中，我们创建了一个新的数组 values 来存储选中选项的属性。在循环中，我们使用 getAttribute 方法来获取选项的 value 属性，并将它添加到 values 数组中。

总结

以上就是获取HTML中选中的复选框选项以及它们的属性的方法。在代码中，我们使用了 checked 属性来检查复选框是否被选中，并使用 getAttribute 方法来获取选项的属性。如果您想进一步了解HTML和DOM，请查阅相关文档和教程。