加载本地文件时重置单选按钮激活状态及样式问题

我来帮你搞定这两个问题——刷新单选按钮激活状态和实现清除功能，咱们一步步来：

1. 实现清除所有激活状态的函数 #

你的clearAllRadios()函数目前没有具体逻辑，咱们需要让它完成两个核心操作：取消所有单选按钮的选中状态，同时移除按钮标签上的激活样式（因为Bootstrap的按钮组是靠<label>的active类来显示选中视觉效果的）。

把下面的JavaScript代码加到你的页面中：

function clearAllRadios() {
    // 选中所有name为"options"的单选按钮
    const radios = document.querySelectorAll('input[name="options"]');
    // 选中对应的按钮标签
    const btnLabels = document.querySelectorAll('.btn-group-justified .btn');
    
    // 重置每个单选按钮的选中状态
    radios.forEach(radio => {
        radio.checked = false;
    });
    
    // 移除所有标签的active类，恢复默认样式
    btnLabels.forEach(label => {
        label.classList.remove('active');
    });
    
    // 阻止服务器按钮的默认提交行为，避免页面刷新
    return false;
}

同时修改你的清除按钮属性，确保点击时执行函数并阻止默认刷新：

<button ID="Button1" runat="server" Text="Button" OnClientClick="return clearAllRadios()">clear me</button>

2. 加载新本地文件时刷新单选按钮状态 #

当你完成新文件的加载逻辑后，只需要调用上面的clearAllRadios()函数，就能一键重置之前的所有激活状态，之后再加载新的数据段到单选按钮即可。

举个例子，你的文件加载函数可以这么写：

function loadNewLocalFile(file) {
    // 这里是你读取本地文件、解析数据的逻辑
    // ...
    
    // 先清除旧的单选按钮激活状态
    clearAllRadios();
    
    // 再把新数据段绑定到单选按钮上（如果需要重新生成按钮，这里写对应的逻辑）
    // ...
}

补充样式说明 #

你当前的CSS定义了.btn-default的默认样式，记得要针对激活状态的按钮写样式（Bootstrap会自动给选中的<label>加上active类），比如：

.btn-default.active {
    color: #fff;
    background-color: #28a745; /* 换成你想要的激活颜色 */
    border-color: #28a745;
}

这样点击单选按钮时，样式会自动切换，和你想要的激活标识效果匹配。

内容的提问来源于stack exchange，提问作者bhapri