如何检查是否选中了一个单选按钮

在HTML表单中，单选按钮是一种用户可以选择其中一个选项的控件。在编写表单时，我们经常需要检查用户是否选中了单选按钮。

HTML代码示例

以下代码是一个包含三个单选按钮的HTML表单。

<form>
  <input type="radio" id="option1" name="option" value="option1">
  <label for="option1">Option 1</label><br>
  <input type="radio" id="option2" name="option" value="option2">
  <label for="option2">Option 2</label><br>
  <input type="radio" id="option3" name="option" value="option3">
  <label for="option3">Option 3</label><br>
</form>

JavaScript代码示例

以下是一种检查用户是否选中单选按钮的方法。我们可以使用JavaScript的querySelectorAll()方法来获取表单中所有的单选按钮，然后遍历它们并检查哪个按钮被选中。

const radios = document.querySelectorAll('input[type="radio"]');
let selectedOption = '';

for (const radio of radios) {
  if (radio.checked) {
    selectedOption = radio.value;
    break;
  }
}

if (selectedOption) {
  console.log(`用户选择了 ${selectedOption}`);
} else {
  console.log('用户没有选择任何选项');
}

代码说明

首先，我们使用querySelectorAll()方法来获取表单中所有类型为“radio”的元素，从而获取三个单选按钮的引用。我们创建一个名为selectedOption的变量，用于存储用户选择的值。

然后，使用for...of循环来遍历单选按钮。如果某个单选按钮被选中，我们将其值存储在selectedOption变量中，并使用break语句退出循环。

最后，我们检查selectedOption变量是否被设置，如果是，则输出用户所选的选项。否则，输出“用户没有选择任何选项”。

结论

这是一种简单的方法来检查用户是否选择了单选按钮。您可以根据需要进行调整，以适应您的特定用例。