如何在JavaScript中获取单选按钮组的值？

在实际业务开发中，我们常常需要获取用户选择的单选按钮的值，比如用户在注册时选择性别、问卷调查时选择答案等。今天，我们就来聊聊如何在JavaScript中获取单选按钮组的值。

实际业务场景

假设我们正在开发一个用户注册页面，用户需要选择他们的性别。我们使用了一组单选按钮来表示性别选项。HTML代码如下：

<div>
  <input type="radio" id="genderm" name="gender" value="male" />
  <label for="genderm">男</label>
  <input type="radio" id="genderf" name="gender" value="female" checked />
  <label for="genderf">女</label>
</div>

在这个例子中，我们有两个单选按钮，用户可以选择“男”或“女”。默认情况下，选中了“女”。

获取单选按钮组的值

在JavaScript中，我们可以使用document.querySelector方法来获取被选中的单选按钮，然后通过它的value属性来获取对应的值。

具体的实现代码如下：

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

解释一下这段代码：

1. document.querySelector('input[name="gender"]:checked')：这段代码会返回被选中的name属性为“gender”的单选按钮元素。

2. .value：通过value属性获取该单选按钮的值。

所以，当我们运行这段代码时，selectedGender的值会是“female”，因为默认情况下“女”按钮是选中的。

结束

在业务开发中，使用JavaScript来获取单选按钮组的值非常简单。我们只需要利用document.querySelector方法来获取被选中的单选按钮，然后通过value属性来获取其值。

这个方法不仅适用于性别选择，还可以应用于任何需要单选的场景，比如问卷调查、选项设置等。掌握了这个技巧，可以让我们的开发工作更加高效，代码更加简洁。

希望这篇文章对你有所帮助！如果有任何问题或建议，欢迎在评论区留言讨论。让我们一起进步，一起成长！