使用 DOM 检查复选框

简介

在使用 JavaScript 操作复选框时，可能需要通过 DOM 操作来获取复选框的当前状态（选中或未选中），或者动态修改复选框的状态。

本文将介绍如何使用 DOM 操作复选框。

操作复选框

获取复选框状态

首先，我们需要通过 DOM 获取到复选框元素。通常可以使用 document.getElementById 方法或 document.querySelector 方法来获取元素。例如，以下是获取 id 为 myCheckbox 的复选框元素的代码：

var myCheckbox = document.getElementById('myCheckbox');

或者需要查询多个复选框时，可以使用 document.querySelectorAll 方法来获取所有符合条件的复选框元素。例如，以下是获取所有 class 为 myCheckboxClass 的复选框元素的代码：

var myCheckboxes = document.querySelectorAll('.myCheckboxClass');

获取到复选框元素后，可以通过访问 checked 属性获取复选框的当前状态。如果该属性的值为 true，则表示该复选框已被选中。如果该属性的值为 false，则表示该复选框未被选中。例如，以下是获取 id 为 myCheckbox 复选框的当前状态的代码：

var isChecked = myCheckbox.checked;
console.log(isChecked);

修改复选框状态

除了获取当前状态外，我们也可能需要动态修改复选框的状态。可以通过修改 checked 属性来实现。例如，以下是将 id 为 myCheckbox 复选框设置为选中状态的代码：

myCheckbox.checked = true;

示例代码

以下是根据上述操作编写的示例代码：

// 获取 id 为 myCheckbox 复选框元素
var myCheckbox = document.getElementById('myCheckbox');

// 输出当前状态
console.log(myCheckbox.checked);

// 修改复选框状态
myCheckbox.checked = true;

参考资料

• MDN Web 文档 - 复选框
• MDN Web 文档 - checked 属性