HTML | DOM 输入单选名称属性

在HTML中，单选框是一种用于向用户展示几个选项中仅能选择一个的选择项。单选框由一个圆形空间和一个标签组成，用户可以通过单击选中或取消选中单选框。

单选框使用 type="radio" 属性来定义，它们具有相同的 name 属性，以确保用户只能选择其中一个。这个 name 属性就是我们要介绍的。

设置单选框的名称属性

设置单选框的名称属性非常简单。下面是一个单选框的例子：

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

在这个例子中，我们定义了两个单选框，它们具有相同的 name 属性：“gender”。这个 name 属性告诉浏览器这两个单选框属于同一组，用户只能选择其中一个选项。

获取单选框的选择值

当用户选择一个单选框时，您需要获取它的值。获取单选框的值需要使用 JavaScript。

以下是获取选中的单选框的值的示例：

var radios = document.getElementsByName('gender');
for (var i = 0, length = radios.length; i < length; i++) {
  if (radios[i].checked) {
    // do something with the checked radio
    console.log(radios[i].value);
    // only one radio can be logically checked, don't check the rest
    break;
  }
}

在上面的代码中，我们首先通过 document.getElementsByName() 方法获取所有名称为“gender”的单选框。然后我们使用一个循环来检查哪个单选框被选中。最后，我们通过 console.log() 方法打印出选中单选框的值。

总结

名称属性是 HTML 单选框的一个重要属性，它允许您将单选框分组，并确保用户只能选择其中一个。使用 JavaScript，您可以方便地获取选中单选框的值，从而做出相应的操作。