需要单选按钮 - HTML

在HTML中，单选按钮是一种用户可以选择的互斥控件。这意味着用户只能选择其中一个选项。

创建单选按钮

要创建单选按钮，我们可以使用<input>元素并设置type属性为radio。

<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>

上面的示例代码创建两个单选按钮，分别对应male和female值。这些单选按钮都归属于同一组，因为它们的name属性都设置为gender。这意味着用户只能选择其中一个选项。

设置默认选择

要设置默认选项，我们可以在<input>元素中添加checked属性。

<label>
  <input type="radio" name="gender" value="male" checked>
  Male
</label>

上面的示例代码将male设为默认选项。

获取选中值

要获取用户所选的值，我们可以使用JavaScript。

<label>
  <input type="radio" name="gender" value="male">
  Male
</label>
<label>
  <input type="radio" name="gender" value="female">
  Female
</label>
<button onclick="getSelection()">Get Selection</button>

<script>
  function getSelection() {
    const selectedValue = document.querySelector('input[name="gender"]:checked').value;
    alert(selectedValue);
  }
</script>

上面的示例代码添加了一个按钮和一个JavaScript函数。当用户单击按钮时，函数将获取用户所选的值并将其作为警报框的消息显示出来。

需要注意的是，我们使用了CSS选择器来选择选定的单选按钮，即input[name="gender"]:checked。这将选择具有name属性为gender且被选中的<input>元素。

结论

本文简要介绍了如何在HTML中创建和使用单选按钮。我们演示了如何创建单选按钮，并设置默认选项和获取用户选择的值。这是一个基本的例子，你可以通过添加样式和JavaScript代码来进行增强。