在 JavaScript 中，你可以通过多种方式获取 input type="radio" 中选中的那个。最常用的方法是结合使用 querySelector 或 querySelectorAll 以及 .checked 属性。

下面我将详细介绍几种常见的方法，并提供代码示例：

核心思路：

* 识别单选按钮组： 单选按钮是通过它们的 name 属性来分组的。同一组的单选按钮只能选择一个。
* 查找选中的按钮： 遍历组内的所有单选按钮，找到那个 checked 属性为 true 的。

—

方法一：使用 querySelector 和 :checked 伪类 (推荐)

这是最简洁、最推荐的方法。:checked 伪类可以直接选中被选中的单选按钮。

HTML 示例：

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

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

<input type="radio" name="gender" value="other" id="other">
<label for="other">Other</label>
</form>

<button onclick="getSelectedGender()">Get Selected Gender</button>
<p id="result"></p>


JavaScript 代码：

javascript
function getSelectedGender() {
// 1. 获取指定 name 和 :checked 状态的单选按钮
const selectedRadio = document.querySelector('input[name="gender"]:checked');

// 2. 检查是否找到了选中的单选按钮
if (selectedRadio) {
const selectedValue = selectedRadio.value;
const resultParagraph = document.getElementById('result');
resultParagraph.textContent = `Selected gender: ${selectedValue}`;
} else {
const resultParagraph = document.getElementById('result');
resultParagraph.textContent = 'No gender selected.';
}
}


解释：

* document.querySelector('input[name="gender"]:checked'):
* input: 选择所有 <input> 元素。
* [name="gender"]: 进一步筛选出 name 属性为 “gender” 的元素。
* :checked: 这是关键！它会选中当前在组中被选中（checked 属性为 true）的那个单选按钮。
* selectedRadio.value: 获取选中单选按钮的 value 属性。

—

方法二：使用 querySelectorAll 遍历

如果你想更手动地控制，或者需要获取所有单选按钮的信息，可以使用 querySelectorAll。

HTML 示例： (与上面相同)

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

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

<input type="radio" name="gender" value="other" id="other">
<label for="other">Other</label>
</form>

<button onclick="getSelectedGenderLoop()">Get Selected Gender (Loop)</button>
<p id="resultLoop"></p>


JavaScript 代码：

javascript
function getSelectedGenderLoop() {
// 1. 获取所有 name 为 "gender" 的单选按钮
const radioButtons = document.querySelectorAll('input[name="gender"]');
let selectedValue = null;

// 2. 遍历所有单选按钮
for (let i = 0; i < radioButtons.length; i++) {
// 3. 检查当前按钮是否被选中
if (radioButtons[i].checked) {
selectedValue = radioButtons[i].value;
break; // 找到后就可以停止循环
}
}

const resultParagraph = document.getElementById('resultLoop');
if (selectedValue) {
resultParagraph.textContent = `Selected gender: ${selectedValue}`;
} else {
resultParagraph.textContent = 'No gender selected.';
}
}


解释：

* document.querySelectorAll('input[name="gender"]'): 获取一个 NodeList，包含所有 name 属性为 “gender” 的 <input> 元素。
* radioButtons[i].checked: 检查当前遍历到的单选按钮的 checked 属性。如果为 true，则表示它被选中了。

—

方法三：通过父元素 (Form) 获取

如果你的单选按钮都包含在一个 <form> 元素内，你也可以先获取表单，然后从表单内查找。

HTML 示例： (与上面相同，只是明确了 id="myForm")

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

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

<input type="radio" name="gender" value="other" id="other">
<label for="other">Other</label>
</form>

<button onclick="getSelectedGenderFromForm()">Get Selected Gender (From Form)</button>
<p id="resultForm"></p>


JavaScript 代码：

javascript
function getSelectedGenderFromForm() {
const form = document.getElementById('myForm');

// 1. 从表单内部使用 :checked 伪类查找
const selectedRadio = form.querySelector('input[name="gender"]:checked');

// 或者使用更通用的方法遍历表单内的所有单选按钮
/*
let selectedValue = null;
const radioButtons = form.querySelectorAll('input[name="gender"]');
for (let i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
selectedValue = radioButtons[i].value;
break;
}
}
*/

const resultParagraph = document.getElementById('resultForm');
if (selectedRadio) {
resultParagraph.textContent = `Selected gender: ${selectedRadio.value}`;
} else {
resultParagraph.textContent = 'No gender selected.';
}
}


解释：

* document.getElementById('myForm'): 获取 ID 为 “myForm” 的表单元素。
* form.querySelector(...): 在表单元素内部执行 querySelector。这比在整个文档中查找更具针对性，当表单很多时会更有优势。

—

总结与最佳实践：

* 首选 document.querySelector('input[name="yourGroupName"]:checked')。 它最简洁、易读，并且效率很高。
* 确保单选按钮有 name 属性。 这是分组的关键，否则它们不会相互排斥。
* 为单选按钮设置 value 属性。 这是你通常需要获取的值。
* 处理未选中情况。 querySelector 在找不到匹配项时返回 null，所以要进行检查。

希望这些方法能够帮助你获取选中的单选按钮！