选项框选中状态检测异常，无法为选中项单独应用样式

我想给用户选中的单选框（注：代码实际为radio类型，此前描述提及checkbox）单独应用样式，所有输入框都带有form-check-input类，我通过querySelectorAll获取了这些元素，但目前无法检测选中状态的变化，导致没法只给选中的项添加样式。

相关HTML代码 #

<label class="form-check-label" for="flexRadioDefault3">
<input class="form-check-input" onchange="toggleCheckbox(this)" type="radio" 
name="flexRadioDefault" id="flexRadioDefault3"></label>

（共有3个上述结构的元素）

相关JavaScript代码 #

let checkGral = document.querySelectorAll('.form-check-input');
let selected = document.querySelector('.planes')

function toggleCheckbox() {
if (selected.checked) {
selected.style.border = '1px solid #0000FF';
} 
}

问题示意图 #

选中的单选框未被正确添加边框样式，无法直观区分选中状态。

修复方案 #

你的代码存在几个关键问题，直接调整即可解决：

• 修正函数参数与逻辑：
  你在onchange事件里传递了this（当前触发事件的单选框），但函数没有接收这个参数，反而错误地去获取.planes元素，导致逻辑完全偏离。

• 处理单选框互斥特性：
  同一组单选框只能选中一个，所以需要先清除所有单选框的样式，再给当前选中的单选框添加样式。

修改后的JavaScript代码：

// 获取所有单选框元素
const radioInputs = document.querySelectorAll('.form-check-input');

function toggleCheckbox(currentRadio) {
    // 清除所有单选框的边框样式
    radioInputs.forEach(input => {
        input.style.border = '';
    });
    // 给当前选中的单选框添加边框
    if (currentRadio.checked) {
        currentRadio.style.border = '1px solid #0000FF';
    }
}

• 可选优化：事件委托
  不用给每个单选框单独绑定onchange属性，直接在父容器上绑定事件，代码更简洁易维护：

// 假设所有单选框的父容器类名为form-check-group
const radioGroup = document.querySelector('.form-check-group');

radioGroup.addEventListener('change', function(e) {
    if (e.target.classList.contains('form-check-input')) {
        // 清除所有单选框的样式
        document.querySelectorAll('.form-check-input').forEach(input => {
            input.style.border = '';
        });
        // 给选中的单选框添加样式
        e.target.style.border = '1px solid #0000FF';
    }
});

使用这种方式时，HTML中的onchange="toggleCheckbox(this)"可以直接移除。

内容的提问来源于stack exchange，提问作者Emiliano Velázquez