使用 URL 参数预选 Radio Input 的教程-js教程-PHP中文网

使用 URL 参数预选 Radio Input 的教程

聖光之護

发布： 2025-10-29 14:43:15

原创

191人浏览过

使用 url 参数预选 radio input 的教程

本教程介绍了如何通过 URL 参数控制新页面中 Radio Input 的默认选中项。通过在链接中附加参数，并使用 PHP 在目标页面动态设置 `checked` 属性，可以实现根据不同链接打开页面时预选不同选项的效果。这种方法简单有效，适用于需要在不同场景下预设 Radio Input 值的 Web 开发。

在 Web 开发中，有时我们需要根据用户的操作或场景，在新页面打开时预先选中某个 Radio Input。一种常见的实现方式是通过 URL 参数传递预选值，然后在目标页面使用 JavaScript 或服务器端脚本（如 PHP）来设置相应的 checked 属性。本文将详细介绍如何使用 PHP 实现这一功能。

1. 创建包含 Radio Input 的 HTML 页面

首先，我们需要创建一个包含 Radio Input 的 HTML 页面（例如 inputs.php）。每个 Radio Input 都有一个唯一的 id 和 value 属性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Inputs</title>
</head>
<body>
    <input type="radio" name="color" id="red" value="red" />Red<br/>
    <input type="radio" name="color" id="green" value="green" />Green<br/>
    <input type="radio" name="color" id="blue" value="blue" />Blue<br/>
</body>
</html>

登录后复制

2. 使用 PHP 获取 URL 参数

接下来，我们需要使用 PHP 获取 URL 中传递的参数。我们可以使用 $_GET 超全局变量来获取参数值。为了避免未定义索引错误，可以使用空合并运算符 ?? 设置一个默认值。

<?php
$color = $_GET['color'] ?? '';
?>

登录后复制

这段代码首先尝试从 URL 中获取名为 color 的参数。如果 color 参数不存在，则 $color 变量将被赋值为空字符串。

3. 根据 URL 参数设置 checked 属性

现在，我们可以根据 $color 变量的值，动态地为相应的 Radio Input 设置 checked 属性。

SpeakingPass-打造你的专属雅思口语语料

使用chatGPT帮你快速备考雅思口语，提升分数

查看详情

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Radio Inputs</title>
</head>
<body>
    <input type="radio" name="color" id="red" value="red" <?php if($color == 'red') echo 'checked'; ?> />Red<br/>
    <input type="radio" name="color" id="green" value="green" <?php if($color == 'green') echo 'checked'; ?> />Green<br/>
    <input type="radio" name="color" id="blue" value="blue" <?php if($color == 'blue') echo 'checked'; ?> />Blue<br/>
</body>
</html>

登录后复制

在上面的代码中，我们使用了 PHP 的条件语句 if 来判断 $color 变量的值是否与 Radio Input 的 value 属性相等。如果相等，则输出 checked 字符串，从而设置该 Radio Input 的 checked 属性。

4. 创建包含链接的 HTML 页面

最后，我们需要创建一个包含链接的 HTML 页面（例如 index.php），这些链接将传递不同的 URL 参数到 inputs.php 页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Index</title>
</head>
<body>
    <a href="inputs.php?color=red">Red</a><br/>
    <a href="inputs.php?color=green">Green</a><br/>
    <a href="inputs.php?color=blue">Blue</a><br/>
</body>
</html>

登录后复制

在上面的代码中，每个链接都包含了 inputs.php 页面，并且附加了一个 color 参数，其值分别为 red、green 和 blue。