HTML | DOM 输入单选值属性

简介

在HTML中，有许多表单元素（input, select, radio等）可以用于用户输入和选择数据。其中，单选值属性是一种特殊的属性类型，可以让用户只能选择其中的一个选项。在DOM中，我们可以使用JavaScript来操作这些元素的属性值。

常见属性

type

这是input元素中最重要的属性之一。它用于指定input元素的类型，例如文本、密码、复选框、单选框等。对于单选框，type属性的值应该为"radio"。

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

name

这是单选框元素的另一个非常重要的属性。它用于给单选框一个名字，同一组单选框应该使用相同的name属性值。这样可以使浏览器知道哪些单选框是同一组的。

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

value

这是单选框元素中最重要的属性之一。它用于指定单选框的值，当用户选择某个单选框时，浏览器会将该单选框的value属性值作为表单提交的值。

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

checked

这是单选框元素用于指定默认选项的属性。如果设置为"checked"，则该单选框会默认选中。

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

JavaScript操作

获取选中的值

要获取用户选中的单选框的值，我们可以使用以下代码：

var radios = document.getElementsByName("sex");
for (var i = 0; i < radios.length; i++) {
  if (radios[i].checked) {
    var selectedValue = radios[i].value;
    break;
  }
}

设置默认选项

要设置某个单选框为默认选中状态，我们可以通过设置checked属性来实现：

var radio = document.getElementById("male");
radio.checked = true;

结论

了解单选值属性的作用和常见属性，以及如何使用JavaScript来操作它们，可以让我们更好地使用表单元素，提高用户体验。