HTML | DOM 输入单选对象

在 HTML 页面中，单选框（Radio Button）用于从一组选项中进行选择。单选框中只有一个选项可以被选中。在 JavaScript 中，我们可以通过 Document Object Model（DOM）来获取单选框对象，从而对其进行操作。

获取单选框对象

在 HTML 中，可以通过 name 属性来将一组单选框关联起来。我们可以使用 document.getElementsByName() 方法来获取这组单选框的 DOM 对象。例如，以下是一个 HTML 页面上的一组单选框：

<form name="radioForm">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>

我们可以通过以下 JavaScript 代码获取这组单选框：

var radioButtons = document.getElementsByName("gender");

这将返回一个 NodeList 对象，其中包含了所有的单选框。我们可以通过循环遍历 NodeList 对象，获取每个单选框的属性和值。

操作单选框

检查单选框是否被选中

检查单选框是否被选中可以使用 checked 属性。例如，以下代码将检查名为 gender 的单选框中是否选中了 male。

var maleRadioButton = document.querySelector('input[name="gender"][value="male"]');
if (maleRadioButton.checked) {
  // do something
}

设置单选框为选中状态

要设置单选框为选中状态，可以使用 checked 属性。例如，以下代码将设置名为 gender 的单选框中的 male 选项被选中。

var maleRadioButton = document.querySelector('input[name="gender"][value="male"]');
maleRadioButton.checked = true;

结论

单选框在 HTML 页面和 JavaScript 中的应用十分广泛。通过 DOM，我们可以很方便地获取单选框对象并对其进行操作，实现各种功能。