摘要：在本教程中，您将学习如何使用 JavaScript 检查单选组中哪个单选按钮被选中。
JavaScript 单选按钮简介单选按钮允许您从一组预定义的互斥选项中选择一个。要创建单选按钮，您使用元素，类型为radio。一组单选按钮称为单选组。
要形成单选组，您对所有单选按钮使用一个共同的名称。例如
Select your size:
Code language: HTML, XML (xml)在此示例中，所有单选按钮都具有相同的名称size，但值不同。因此，您一次只能选择一个单选按钮。
要查找选定的单选按钮，您需要执行以下步骤
使用 DOM 方法（例如querySelectorAll()方法）选择所有单选按钮。获取单选按钮的checked属性。如果checked属性为true，则该单选按钮被选中；否则，它未被选中。要了解哪个单选按钮被选中，您可以使用value属性。例如
Select your size:
Code language: HTML, XML (xml) 工作原理。
首先，选择具有#btn id 的按钮、具有#output id 的输出元素以及所有名称为size的单选按钮
const btn = document.querySelector('#btn');
const output = document.querySelector('#output');
const radioButtons = document.querySelectorAll('input[name="size"]');
Code language: JavaScript (javascript)其次，在按钮元素上注册一个点击事件监听器
btn.addEventListener('click', () => {
});Code language: PHP (php)第三，遍历单选按钮并获取选中单选按钮的值
let selectedSize;
for (const radioButton of radioButtons) {
if (radioButton.checked) {
selectedSize = radioButton.value;
break;
}
}Code language: JavaScript (javascript)如果一个单选按钮被选中，则它的checked属性为true。然后，我们将选中单选按钮的value分配给selectedSize变量。
由于单选组中一次只能选中一个单选按钮，因此循环通过break语句立即终止。
最后，设置输出元素的消息
output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;Code language: JavaScript (javascript)单选按钮的更改事件当您选中或取消选中单选按钮时，它会触发更改事件。要监听更改事件，您可以使用addEventListener()方法，如下所示
radioButton.addEventListener('change',function(e){
});Code language: JavaScript (javascript)在更改事件处理程序中，您可以访问this关键字来访问单选按钮。要检查单选按钮是否被选中，您可以使用checked属性
if(this.checked) {
//
}Code language: JavaScript (javascript)要获取选中按钮的值，您可以使用value属性
if(this.checked) {
console.log(this.value);
}Code language: JavaScript (javascript)它将如下所示
radioButton.addEventListener('change', function (e) {
if (this.checked) {
console.log(this.value);
}
});Code language: JavaScript (javascript)以下示例动态生成一个单选组，并在选中单选按钮时显示选中值
Select your size:
Code language: HTML, XML (xml) 工作原理。
首先，定义一个字符串数组，用于保存尺寸。在实践中，您可能从后端数据库或 API 调用结果中获取这些值
const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];Code language: JavaScript (javascript)其次，从尺寸数组的元素中生成单选组
const group = document.querySelector('#group');
group.innerHTML = sizes
.map(
(size) => `
)
.join(' ');
Code language: JavaScript (javascript)在此代码中
1) 选择具有 id #group的元素。
2) 使用map()方法和模板文字生成一个单选组；每个数组元素对应一个单选按钮 HTML。
3) 使用join()方法将单选按钮 HTML 字符串连接成一个 HTML 字符串。
4) 将 HTML 分配给输出元素的innerHTML。
第三，选择所有名称为size的单选按钮并添加更改事件监听器
const radioButtons = document.querySelectorAll('input[name="size"]');
for (const radioButton of radioButtons) {
radioButton.addEventListener('change', showSelected);
}Code language: JavaScript (javascript)最后，定义更改事件处理程序
function showSelected(e) {
if (this.checked) {
document.querySelector('#output').innerText = `You selected ${this.value}`;
}
}Code language: JavaScript (javascript)总结使用类型为radio的元素创建单选按钮。为多个单选按钮分配一个名称以形成单选组。单选组中一次只能选择一个单选按钮。如果单选按钮被选中，则它的checked属性为true。本教程是否有帮助？ 是的 否 发送 取消