HTML | DOM 输入单选表单属性

简介

在 HTML 表单中，单选按钮用于从一组中选择一个选项。这组选项可以是一个静态的列表，也可以是由后端或其他数据源生成的动态列表。

单选按钮通常使用 <input> 元素来创建，类型属性设置为 "radio"。每个单选按钮都有一个唯一的值，将其与其他单选按钮分开。

属性

name 属性

单选按钮中的 name 属性用于指定一个组，将其与其他单选按钮组合起来。同一个组中的单选按钮应具有相同的 name 属性值。

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

value 属性

每个单选按钮都应该具有一个唯一的值。当用户选择一个选项时，该值将被提交到服务器或在客户端使用 JavaScript 进行处理。

<input type="radio" name="color" value="red"> Red
<br>
<input type="radio" name="color" value="green"> Green
<br>
<input type="radio" name="color" value="blue"> Blue

checked 属性

通过 checked 属性可以设置单选按钮的默认选中状态。当 checked 属性设置为 "checked" 时，该单选按钮将被默认选中。

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

disabled 属性

通过 disabled 属性可以设置单选按钮为禁用状态，用户将无法选择该选项。

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

DOM 操作

在 JavaScript 中，可以使用 DOM 来操纵单选按钮。

通过 name 属性选择单选按钮

可以使用 document.getElementsByName 方法通过 name 属性选择所有具有相同 name 属性值的单选按钮。

var genderRadios = document.getElementsByName("gender");

// 获取选中的单选按钮的值
var selectedValue = "";
for (var i = 0; i < genderRadios.length; i++) {
  if (genderRadios[i].checked) {
    selectedValue = genderRadios[i].value;
    break;
  }
}

通过值选择单选按钮

可以使用 document.querySelector 方法通过值选择特定的单选按钮。

var radio = document.querySelector('input[value="male"]');

// 将单选按钮设置为选中状态
radio.checked = true;

动态创建单选按钮

可以使用 document.createElement 和 appendChild 方法动态创建和添加单选按钮。

var form = document.querySelector("form");

var radio1 = document.createElement("input");
radio1.type = "radio";
radio1.name = "color";
radio1.value = "red";

var radio2 = document.createElement("input");
radio2.type = "radio";
radio2.name = "color";
radio2.value = "blue";

form.appendChild(radio1);
form.appendChild(radio2);

以上是一些常用的 HTML 和 DOM 输入单选表单属性的介绍。希望对你有所帮助！