Radio type 属性

什么是 Radio type 属性

radio 类型的 <input> 元素用于创建单选按钮，用户只能在一组选项中选择一个。每个单选按钮都有一个相同的 name 属性，这样它们就可以被分组在一起，用户只能选择其中一个选项。

如何在 HTML 中创建 Radio 类型的输入框

要创建一个单选按钮，只需在 <input> 元素中设置 type 属性为 radio，并为每个单选按钮指定一个相同的 name 属性。下面是一个简单的示例：

<form>
  <input type="radio" name="gender" value="male" id="male">
  <label for="male">Male</label>

  <input type="radio" name="gender" value="female" id="female">
  <label for="female">Female</label>
</form>

在上面的示例中，我们创建了两个单选按钮，分别表示性别为男性和女性。它们都有相同的 name 属性为 gender，这样它们就可以被分组在一起，用户只能选择其中一个选项。

如何通过 JavaScript 获取 Radio 类型的值

通常情况下，我们需要通过 JavaScript 来获取用户选择的单选按钮的值。可以通过 document.querySelector() 或 document.getElementsByName() 来获取单选按钮的值。下面是一个示例代码：

const gender = document.querySelector('input[name="gender"]:checked').value;
console.log(gender);

在上面的示例中，我们通过 document.querySelector() 方法选择了 name 属性为 gender 的被选中的单选按钮，并获取了其值。

总结

通过本文的介绍，你应该对 Radio 类型属性有了更深入的了解，并学会了如何在 HTML 中创建单选按钮，以及如何通过 JavaScript 来获取用户选择的值。希望这篇文章对你有所帮助！