纯HTML筛选表单问题：切换年份丢失type参数的解决方案咨询

问题场景 #

用<select>控件作为year筛选器，选择年份时通过onchange提交表单，由PHP处理GET参数；用<button type="submit">作为type筛选器，点击后添加type参数并重载页面。但切换年份时，已选中的type参数会丢失，希望给type按钮添加类似select选项selected的选中状态，且仅用纯HTML实现（不依赖前端JS）。

纯HTML解决方案 #

用<input type="radio">配合<label>模拟按钮效果——radio控件天然支持checked状态，提交表单时会自动携带选中的type参数，同时可通过服务端（PHP）根据当前GET参数预设checked属性，彻底解决切换年份时参数丢失的问题。

修改后的可运行示例代码 #

<!DOCTYPE html>
<html lang="zh-CN">
<body>
    <form method="get">
        <!-- 用radio+label模拟类型筛选按钮 -->
        <input type="radio" id="typeA" name="type" value="A" <?php echo isset($_GET['type']) && $_GET['type'] === 'A' ? 'checked' : ''; ?>>
        <label for="typeA">A</label>
        
        <input type="radio" id="typeB" name="type" value="B" <?php echo isset($_GET['type']) && $_GET['type'] === 'B' ? 'checked' : ''; ?>>
        <label for="typeB">B</label>
        
        <select name="year" onchange="this.closest('form').submit()">
            <option value="2024" <?php echo isset($_GET['year']) && $_GET['year'] === '2024' ? 'selected' : ''; ?>>2024</option>
            <option value="2023" <?php echo isset($_GET['year']) && $_GET['year'] === '2023' ? 'selected' : ''; ?>>2023</option>
        </select>
    </form>

    <style>
        /* 隐藏原生radio，让label呈现按钮样式 */
        input[type="radio"] {
            display: none;
        }
        input[type="radio"] + label {
            padding: 4px 12px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
            margin-right: 8px;
        }
        /* 给选中状态的label添加高亮样式，模拟按钮选中效果 */
        input[type="radio"]:checked + label {
            background-color: #007bff;
            color: white;
            border-color: #007bff;
        }
    </style>
</body>
</html>

方案说明 #

1. 参数留存逻辑：radio控件统一设置name="type"，确保同一时间仅能选中一个选项，提交表单时会自动将选中的value作为type参数携带到URL中；切换年份时，表单提交会同步带上当前选中的type参数，不会丢失。
2. 选中状态保持：通过PHP的$_GET全局变量判断当前筛选参数，给对应radio添加checked属性、给select选项添加selected属性，页面重载后自动恢复选中状态。
3. 交互体验还原：用CSS隐藏原生radio，将label样式调整为按钮样式，同时给选中状态的label添加高亮效果，完全还原原按钮的交互体验。

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