下拉菜单单选按钮功能异常：无图片标签无法正常显示

安全阿岳

2026-6-29

修复自定义Radio按钮下拉菜单的选中显示问题

问题原因

原代码中获取标签元素的逻辑错误：selectedRadioButton.querySelector('.custom-radio-label')试图在radio输入框内部查找.custom-radio-label元素，但该元素实际是radio的父级label的子元素，导致无图片的选项无法正确获取标签内容，进而无法更新下拉框显示。

修复后的代码

document.addEventListener('DOMContentLoaded', function() {
    const dropdownWrapper = document.getElementById('dropdown-wrapper');
    const radioButtons = dropdownWrapper.querySelectorAll('.dropdown-list input[type="radio"]');
    const spanElement = dropdownWrapper.querySelector('span');

    function handleRadioButtonSelection(event) {
        const selectedRadioButton = event.target;
        if (selectedRadioButton.checked) {
            // 从父级label容器中获取自定义标签元素
            const labelElement = selectedRadioButton.closest('.custom-radio').querySelector('.custom-radio-label');
            // 获取标签文本，处理空值情况
            const labelText = labelElement ? labelElement.textContent.trim() : '';
            // 获取图片地址，无图片时返回null
            const imageElement = labelElement ? labelElement.querySelector('img') : null;
            const imageSrc = imageElement ? imageElement.src : null;
            
            // 更新下拉框显示内容
            spanElement.innerHTML = imageSrc ? `<img src="${imageSrc}" alt=""> ${labelText}` : labelText;
        }
    }

    radioButtons.forEach(radioButton => {
        radioButton.addEventListener('change', handleRadioButtonSelection);
    });
});