本文档介绍如何通过 URL 参数控制新页面中 Radio Input 的选中状态。通过在链接中附加参数，我们可以指定打开页面时哪个 Radio Input 默认被选中。本文将提供详细的代码示例和解释，帮助开发者实现此功能。
实现原理
核心思路是通过链接传递参数，然后在目标页面使用 JavaScript 或服务器端语言（如 PHP）读取这些参数，并根据参数值设置对应 Radio Input 的 checked 属性。
具体步骤
-
构建带有参数的链接：
在源页面，创建指向目标页面的链接，并在 URL 中附加参数。参数名可以自定义，例如 color，参数值对应于 Radio Input 的 value 属性。
例如：
Red
Green
Blue这里，inputs.php 是目标页面的文件名，?color=red、?color=green 和 ?color=blue 分别表示传递 color 参数，其值分别为 red、green 和 blue。
-
在目标页面读取参数：
在 inputs.php 页面，使用服务器端语言（例如 PHP）或 JavaScript 读取 URL 中的参数。
PHP 示例：
这段代码使用 $_GET 超全局变量获取 URL 中的 color 参数。?? '' 是 PHP 7+ 的空合并运算符，如果 $_GET['color'] 不存在，则 $color 变量将被赋值为空字符串。
JavaScript 示例：
function getParameterByName(name, url = window.location.href) { name = name.replace(/[\[\]]/g, '\\$&'); var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'), results = regex.exec(url); if (!results) return null; if (!results[2]) return ''; return decodeURIComponent(results[2].replace(/\+/g, ' ')); } var color = getParameterByName('color');这段 JavaScript 代码定义了一个 getParameterByName 函数，用于从 URL 中获取指定名称的参数。
-
根据参数设置 Radio Input 的 checked 属性：
根据读取到的参数值，在目标页面中设置对应 Radio Input 的 checked 属性。
PHP 示例：
/>Red
/>Green
/>Blue这段代码使用 PHP 的 if 语句判断 $color 变量的值，如果与 Radio Input 的 value 属性相同，则输出 checked 属性，使该 Radio Input 默认被选中。
JavaScript 示例：
document.addEventListener('DOMContentLoaded', function() { var color = getParameterByName('color'); if (color) { var radio = document.getElementById(color); if (radio) { radio.checked = true; } } });这段 JavaScript 代码在文档加载完成后执行，首先获取 URL 中的 color 参数，然后根据参数值找到对应的 Radio Input，并设置其 checked 属性为 true。
完整代码示例
index.php (源页面):
Index
Red
Green
Blue
inputs.php (目标页面，使用 PHP):
Inputs
/>Red
/>Green
/>Blue
inputs.html (目标页面，使用 JavaScript):
Inputs
Red
Green
Blue
注意事项
- 安全性： 当从 URL 中获取参数时，请务必进行验证和过滤，以防止跨站脚本攻击 (XSS)。
- 用户体验： 确保链接中的参数值与 Radio Input 的 value 属性一致，否则可能导致 Radio Input 无法正确选中。
- 框架兼容性: 上述代码示例为原生 PHP 和 JavaScript 实现。如果在框架中使用，例如 React, Vue 或 Angular，需要根据框架的语法和生命周期管理来调整代码。
- URL 编码： 确保 URL 中的参数值经过正确的编码，特别是包含特殊字符时。可以使用 encodeURIComponent() 函数进行编码。
总结
通过本文的介绍，您应该已经掌握了如何通过链接打开新页面并预选 Radio Input 的方法。无论是使用 PHP 还是 JavaScript，都可以轻松实现此功能。希望本文对您有所帮助！
