HTML DOM Radio 对象

HTML DOM Radio对象表示HTML表单中的选框按钮。这些按钮包括单选按钮和复选框。单选按钮只允许用户选择一个选项，而复选框允许用户选择多个选项。

使用HTML DOM可以通过操作Radio对象来控制表单的选项。本文将围绕Radio对象展开详细介绍。

创建 Radio 对象

Radio对象可以通过Document对象创建，例如下面的代码创建了一个单选按钮的Radio对象：

var input = document.createElement("input");
input.type = "radio";

Radio 对象属性

Radio对象具有以下常用属性：

• checked：表示单选按钮是否被选中。该属性是一个布尔值，为true表示选中，为false表示未选中。
• defaultChecked：表示单选按钮默认是否被选中。该属性是一个布尔值，为true表示默认选中，为false表示默认未选中。
• value：表示单选按钮的值。该属性是一个字符串类型，可以通过设置和获取。

Radio 对象方法

Radio对象具有以下常用方法：

• click()：模拟单选按钮的点击事件。
• blur()：移出单选按钮的焦点状态。
• focus()：让单选按钮获得焦点状态。
• select()：选取单选按钮的全部文本内容。

Radio 对象事件

Radio对象具有以下常用事件：

• onchange：单选按钮被选中或取消选中时触发。事件处理函数会传递一个Event对象，可以通过它获取Radio对象的状态。
• onclick：单选按钮被点击时触发。事件处理函数会传递一个Event对象，可以通过它获取Radio对象的状态。

Radio 对象应用

通过Radio对象，我们可以根据用户的输入操作来改变选项和表单内容。例如：

<form>
  <input type="radio" name="fruit" value="apple" checked>苹果<br>
  <input type="radio" name="fruit" value="banana">香蕉<br>
  <input type="radio" name="fruit" value="orange">橘子<br>
  <input type="button" onclick="myFunction()" value="显示选中的水果">
</form>

<script>
function myFunction() {
  var radios = document.getElementsByName("fruit");
  var selectedFruit = "";
  for (var i = 0; i < radios.length; i++) {
    if (radios[i].checked) {
      selectedFruit = radios[i].value;
      break;
    }
  }
  alert("选中了 " + selectedFruit);
}
</script>

在上述代码中，我们创建了三个单选框，分别为苹果、香蕉和橘子。这三个单选框的name都设置为“fruit”，这是因为同名的单选框只能选择其中的一个。其中，苹果单选框将默认选中。

在最后一个input标签中，我们创建了一个按钮，按钮的onclick事件会调用myFunction()方法，获取选中的单选框的值，并将值弹出提示框。

总结

Radio对象是HTML表单中常用的选项元素。使用HTML DOM可以通过Radio对象的属性、方法和事件来操作和控制该选项元素，并根据用户输入来改变表单内容。熟练掌握Radio对象的使用方法可以大大提高HTML表单操作的便捷性和效率。