HTML | DOM 输入单选类型属性

在HTML中，我们可以使用单选框（Radio buttons）来允许用户在一组选项中选择一个选项。当用户点击单选框时，只有一个选项可以被选中。在处理这些单选框的值时，我们可以使用DOM来访问和操作它们。

创建单选框

我们可以使用HTML的<input>标签来创建单选框。设置type属性为"radio"来指定它是一个单选框。可以使用name属性为单选框分组，并使用value属性为每个单选框指定一个唯一的值。

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female

在上面的例子中，我们创建了两个单选框，分别代表性别选择。它们被分组到名为"gender"的组中，并给每个单选框指定了不同的值。

使用DOM访问和操作单选框

使用JavaScript DOM，我们可以通过标识符（id）或其他选择器来选择单选框并对其进行操作。

首先，我们需要获取单选框的引用。可以使用getElementById()方法来根据id选择单选框，或使用其他选择器方法来选择它们。

var maleRadio = document.getElementById("male");
var femaleRadio = document.querySelector('input[name="gender"][value="female"]');

在上面的代码片段中，我们分别通过id和选择器选择了两个单选框。

检查选中的单选框

要检查哪个单选框被选中，我们可以使用checked属性。如果单选框被选中，checked属性的值将为true，否则为false。我们可以使用JavaScript的条件语句来判断和处理选中的单选框。

if (maleRadio.checked) {
  console.log("Male radio is selected");
} else if (femaleRadio.checked) {
  console.log("Female radio is selected");
}

上述代码检查了男性和女性单选框是否被选中，并在控制台输出相应的消息。

设置选中的单选框

要设置单选框的选中状态，我们可以将checked属性设置为true或false。

maleRadio.checked = true; // 将男性单选框选中

上述代码将男性单选框设置为选中状态。

获取选中的单选框的值

当用户选择一个单选框时，我们可以通过遍历所有单选框并检查其checked属性来确定选中的单选框，并获取其值。

var genderRadios = document.getElementsByName("gender");
var selectedValue;
for (var i = 0; i < genderRadios.length; i++) {
  if (genderRadios[i].checked) {
    selectedValue = genderRadios[i].value;
    break;
  }
}
console.log("Selected gender:", selectedValue);

上面的代码首先使用getElementsByName()方法选择了所有名为"gender"的单选框，然后遍历这些单选框并检查它们的checked属性。如果找到被选中的单选框，将其值赋给selectedValue变量，并在控制台输出选中的性别。

以上是关于使用HTML和DOM操作单选框的介绍。通过DOM，我们可以选择、检查、设置和获取单选框的值，从而实现动态化的交互体验。