如何跳转至指定单选框已选中状态的Inputs.html页面？

一、前端纯JavaScript方案 #

1. 首页（index.html）的跳转链接配置 #

给每个跳转链接添加URL查询参数，指定要选中的单选框ID：

<!-- index.html 中的链接示例 -->
<a href="Inputs.html?color=red">跳转到红色选中状态</a>
<a href="Inputs.html?color=green">跳转到绿色选中状态</a>
<a href="Inputs.html?color=blue">跳转到蓝色选中状态</a>

2. Inputs.html 中的单选框选中逻辑 #

在Inputs.html页面末尾插入一段JavaScript，读取URL参数并设置对应单选框为选中状态：

<!-- 在 Inputs.html 的 </body> 标签前添加 -->
<script>
// 解析URL中的查询参数
const urlParams = new URLSearchParams(window.location.search);
const targetColor = urlParams.get('color');

// 若参数存在且对应单选框存在，则设置选中
if (targetColor) {
  const targetRadio = document.getElementById(targetColor);
  if (targetRadio) {
    targetRadio.checked = true;
  }
}
</script>

二、PHP服务端方案 #

1. 首页（index.php）的跳转链接配置 #

将首页改为.php后缀（或保持.html但服务器支持PHP解析），链接指向处理后的Inputs.php页面：

<!-- index.php 中的链接示例 -->
<a href="Inputs.php?color=red">跳转到红色选中状态</a>
<a href="Inputs.php?color=green">跳转到绿色选中状态</a>
<a href="Inputs.php?color=blue">跳转到蓝色选中状态</a>

2. 修改 Inputs.html 为 Inputs.php，动态渲染单选框 #

通过PHP获取GET参数，为对应单选框添加checked属性：

<!-- Inputs.php 中的单选框代码 -->
<?php
// 获取URL参数，默认空值避免报错
$selectedColor = $_GET['color'] ?? '';
?>

<input type="radio" name="color" id="red" value="red" <?php echo $selectedColor === 'red' ? 'checked' : ''; ?> />
<label for="red">红色</label>

<input type="radio" name="color" id="green" value="green" <?php echo $selectedColor === 'green' ? 'checked' : ''; ?> />
<label for="green">绿色</label>

<input type="radio" name="color" id="blue" value="blue" <?php echo $selectedColor === 'blue' ? 'checked' : ''; ?> />
<label for="blue">蓝色</label>

方案说明 #

• 纯JS方案无需修改页面后缀，适合静态站点，完全在前端完成逻辑，缺点是依赖浏览器JavaScript支持。
• PHP方案依赖服务端渲染，即使浏览器禁用JS也能正常生效，还可对参数做额外校验（比如限制可选颜色值），适合有服务端支持的场景。

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