JavaScript 单选按钮 - 检查单选按钮是否被选中

摘要：在本教程中，您将学习如何使用 JavaScript 检查单选组中哪个单选按钮被选中。

JavaScript 单选按钮简介

单选按钮允许您从一组预定义的互斥选项中选择一个。要创建单选按钮，您使用<input>元素，类型为radio。一组单选按钮称为单选组。

要形成单选组，您对所有单选按钮使用一个共同的名称。例如

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
</body>
</html>Code language: HTML, XML (xml)

在此示例中，所有单选按钮都具有相同的名称size，但值不同。因此，您一次只能选择一个单选按钮。

要查找选定的单选按钮，您需要执行以下步骤

使用 DOM 方法（例如querySelectorAll()方法）选择所有单选按钮。
获取单选按钮的checked属性。如果checked属性为true，则该单选按钮被选中；否则，它未被选中。

要了解哪个单选按钮被选中，您可以使用value属性。例如

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>
<body>
    <p>Select your size:</p>
    <div>
        <input type="radio" name="size" value="XS" id="xs">
        <label for="xs">XS</label>
    </div>
    <div>
        <input type="radio" name="size" value="S" id="s">
        <label for="s">S</label>
    </div>
    <div>
        <input type="radio" name="size" value="M" id="m">
        <label for="m">M</label>
    </div>
    <div>
        <input type="radio" name="size" value="L" id="l">
        <label for="l">L</label>
    </div>
    <div>
        <input type="radio" name="size" value="XL" id="xl">
        <label for="xl">XL</label>
    </div>
    <div>
        <input type="radio" name="size" value="XXL" id="xxl">
        <label for="xxl">XXL</label>
    </div>
    <p>
        <button id="btn">Show Selected Value</button>
    </p>

    <p id="output"></p>

    <script>
        const btn = document.querySelector('#btn');        
        const radioButtons = document.querySelectorAll('input[name="size"]');
        btn.addEventListener("click", () => {
            let selectedSize;
            for (const radioButton of radioButtons) {
                if (radioButton.checked) {
                    selectedSize = radioButton.value;
                    break;
                }
            }
            // show the output:
            output.innerText = selectedSize ? `You selected ${selectedSize}` : `You haven't selected any size`;
        });
    </script>
</body>
</html>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)

以下示例动态生成一个单选组，并在选中单选按钮时显示选中值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Radio Button</title>
</head>

<body>
    <p>Select your size:</p>
    <div id="group">
    </div>

    <p id="output"></p>

    <script>
        const sizes = ['XS', 'S', 'M', 'L', 'XL', 'XXL'];

        // generate the radio groups        
        const group = document.querySelector("#group");
        group.innerHTML = sizes.map((size) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`).join(' ');
        
        // add an event listener for the change event
        const radioButtons = document.querySelectorAll('input[name="size"]');
        for(const radioButton of radioButtons){
            radioButton.addEventListener('change', showSelected);
        }        
        
        function showSelected(e) {
            console.log(e);
            if (this.checked) {
                document.querySelector('#output').innerText = `You selected ${this.value}`;
            }
        }
    </script>
</body>

</html>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) => `<div>
                <input type="radio" name="size" value="${size}" id="${size}">
                 <label for="${size}">${size}</label>
            </div>`
  )
  .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的<input>元素创建单选按钮。
为多个单选按钮分配一个名称以形成单选组。单选组中一次只能选择一个单选按钮。
如果单选按钮被选中，则它的checked属性为true。

本教程是否有帮助？