使用 JavaScript 获取所选单选按钮的值

在 Web 开发中，单选按钮（radio buttons）是一种常见的用户输入方式。在用户选择单选按钮之后，我们可能需要使用 JavaScript 来获取其所选的值，以便将其用于进一步的计算或其他操作。

HTML

以下是一个包含单选按钮的 HTML 表单示例。

<form>
  <p>请选择一个选项:</p>
  <input type="radio" id="option1" name="option" value="option1">
  <label for="option1">选项一</label><br>
  <input type="radio" id="option2" name="option" value="option2">
  <label for="option2">选项二</label><br>
  <input type="radio" id="option3" name="option" value="option3">
  <label for="option3">选项三</label>
</form>

在这个表单中，我们有三个单选按钮，它们的名称相同，但值不同。

JavaScript

要获取所选单选按钮的值，我们可以使用 document.querySelector() 来检索所选单选按钮的值，然后使用 value 属性来获取其值。

以下是使用原生 JavaScript 的示例代码：

const options = document.getElementsByName('option');

let selectedValue;

for (const option of options) {
  if (option.checked) {
    selectedValue = option.value;
    break;
  }
}

console.log(selectedValue);

在这个代码片段中，我们首先使用 document.getElementsByName() 方法获取具有名称 option 的所有元素（即我们的单选按钮）。我们在一个循环中遍历每个单选按钮，如果发现选中了一个单选按钮，我们将其值存储在 selectedValue 变量中，并使用 break 退出循环。

我们可以在浏览器控制台中运行此代码，以查看用户所选单选按钮的值。

jQuery

如果您使用 jQuery 库，检索所选单选按钮的值会更为简单。

以下是使用 jQuery 的示例代码：

const selectedValue = $('input[name="option"]:checked').val();

console.log(selectedValue);

在这个代码片段中，我们使用 $() 函数选择具有名称 option 和选定状态的输入元素，然后使用 val() 方法来获取所选单选按钮的值。

结论

使用 JavaScript 或 jQuery 获取所选单选按钮的值很容易，我们只需要使用少量的代码就可以实现。无论使用哪种方法，检索所选单选按钮的值都是实现交互式 Web 应用程序的基础。