JavaScript 如何检查单选按钮是否被选中

在网页开发中，常常需要知道单选按钮是否被用户选中，以便进行相应的逻辑处理。JavaScript 提供了几种方法来实现这一功能。

获取单选按钮元素

在检查单选按钮是否被选中之前，首先要获取到对应的单选按钮元素。可以使用 document.getElementById() 方法通过单选按钮的 id 属性来获取元素，例如：

const radioButton = document.getElementById('myRadioButton');

如果页面中有多个单选按钮组成一个单选组，且具有相同的 name 属性，那么可以使用 document.querySelectorAll() 方法来获取整个单选组，如：

const radioButtons = document.querySelectorAll('input[type="radio"]');

检查单个单选按钮是否被选中

对于单个单选按钮，可以通过检查其 checked 属性来判断是否被选中。checked 属性是一个布尔值，true 表示被选中，false 表示未被选中。示例代码如下：

if (radioButton.checked) {
    console.log('单选按钮被选中了');
} else {
    console.log('单选按钮未被选中');
}

检查单选组中是否有按钮被选中

当面对一组单选按钮时，需要遍历整个单选组来检查是否有按钮被选中。可以使用 forEach() 方法遍历 NodeList，示例如下：

radioButtons.forEach((radio) => {
    if (radio.checked) {
        console.log('有单选按钮被选中了');
        return;
    }
});

也可以使用传统的 for 循环：

for (let i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
        console.log('有单选按钮被选中了');
        break;
    }
}

事件监听

为了在用户选择单选按钮时实时获取状态变化，可以为单选按钮添加事件监听器。例如，使用 addEventListener() 方法监听 change 事件：

radioButton.addEventListener('change', function () {
    if (this.checked) {
        console.log('单选按钮被选中了');
    } else {
        console.log('单选按钮未被选中');
    }
});

掌握这些方法，开发者就能轻松地在 JavaScript 中检查单选按钮的选中状态，从而为网页添加更丰富、灵活的交互逻辑，提升用户体验。无论是简单的表单验证，还是复杂的业务逻辑处理，检查单选按钮选中状态都是一项重要的技能。