HTML DOM Radio 对象
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表单操作的便捷性和效率。