英文:
How to open new page with certain radio inputs checked
问题
为了简化，这里有一个示例。我想要从我的首页链接到我的Inputs.html，并选择其中一个输入。
例如，在第一个链接上，我想要打开Inputs页面，并选择“红色”单选框，第二个链接选择绿色，依此类推。
到目前为止，站点上只使用了html、js和css，服务器上有一些php。
Inputs.html
...
<input type="radio" name="color" id="red" value="red" />
<label...>
<input type="radio" name="color" id="green" value="green" />
<label...>
<input type="radio" name="color" id="blue" value="blue" />
<label...>
...
英文:
For simplicity, here is an example. I want to have a link from my index page to my Inputs.html with one of the inputs selected.
For example, on the first link I want to open the Inputs page with "red" radio input to be checked, on the second green and so on.
So far only html, js and css are used on site, with some php on server
Inputs.html
...
<input type="radio" name="color" id="red" value="red" />
<label...>
<input type="radio" name="color" id="green" value="green" />
<label...>
<input type="radio" name="color" id="blue" value="blue" />
<label...>
...
答案1
得分: 1
index.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>Document</title>
</head>
<body>
<a href="input.php?color=red">红色</a><br/>
<a href="input.php?color=green">绿色</a><br/>
<a href="input.php?color=blue">蓝色</a><br/>
</body>
</html>
inputs.php
<?php
$color = $_GET['color'] ?? '';
?>
<!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>Document</title>
</head>
<body>
<input type="radio" name="color" id="red" value="red" <?php if($color=='red') echo("checked") ?>>红色<br/>
<input type="radio" name="color" id="green" value="green" <?php if($color=='green') echo("checked") ?>>绿色<br/>
<input type="radio" name="color" id="blue" value="blue" <?php if($color=='blue') echo("checked") ?>>蓝色<br/>
</body>
</html>
英文:
Hope this will help you
index.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>Document</title>
</head>
<body>
<a href="input.php?color=red">Red</a><br/>
<a href="input.php?color=green">Green</a><br/>
<a href="input.php?color=blue">Blue</a><br/>
</body>
</html>
inputs.php
<?php
$color = $_GET['color'] ??'';
?>
<!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>Document</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>
答案2
得分: 0
你可以使用jQuery选择该单选按钮并将其选中：
$(""#red").prop(""checked", true);
英文:
You can use jquery to select that radio button and get it checked:
$("#red").prop("checked", true);
答案3
得分: 0
查询参数 允许URL包含应选择哪个单选按钮。单选按钮可以在后端或前端中选择。
假设查询参数 color=VALUE（其中 VALUE 是单选按钮的值）应预先选择匹配的单选按钮。
在PHP 中，您可以这样选择：
<?php $color = $_GET["color"] ?? ""; ?>
<input type="radio" name="color" id="red" value="red"
<?php if ($color === "red"): ?>checked<?php endif; ?>>
<input type="radio" name="color" id="green" value="green"
<?php if ($color === "green"): ?>checked<?php endif; ?>>
<input type="radio" name="color" id="blue" value="blue"
<?php if ($color === "blue"): ?>checked<?php endif; ?>>
在JS 中，如果您有表单的引用，可以这样选择：
const searchParams = new URLSearchParams("?color=green"); // 示例查询字符串
const form = document.forms[0]; // 表单引用
if (searchParams.has("color")) {
const color = searchParams.get("color");
form.elements.namedItem("color").forEach(radio => {
radio.checked = radio.value === color;
});
}
或者像这样：
const searchParams = new URLSearchParams(window.location.search);
if (searchParams.has("color")) {
// 因为ID等于值，我们可以这样做：
const radio = document.getElementById(searchParams.get("color"));
radio.checked = true;
}
英文:
Query parameters allow the URL to include what radio button should be selected. The radio button can be selected in the backend or the frontend.
Let's say that the query parameter color=VALUE (where VALUE is a radio button's values) should preselect the matching radio button.
In PHP you could select it like this:
<?php $color = $_GET["color"] ?? ""; ?>
<input type="radio" name="color" id="red" value="red"
<?php if ($color === "red"): ?>checked<?php endif; ?>>
<input type="radio" name="color" id="green" value="green"
<?php if ($color === "green"): ?>checked<?php endif; ?>>
<input type="radio" name="color" id="blue" value="blue"
<?php if ($color === "blue"): ?>checked<?php endif; ?>>
In JS you could select it like this (should you have a reference to the form):
<!-- begin snippet: js hide: true console: true babel: false -->
<!-- language: lang-js -->
const searchParams = new URLSearchParams("?color=green"); // Example query string
const form = document.forms[0]; // The form reference
if (searchParams.has("color")) {
const color = searchParams.get("color");
form.elements.namedItem("color").forEach(radio => {
radio.checked = radio.value === color;
});
}
<!-- language: lang-html -->
<form>
<label for="red"><input type="radio" name="color" id="red" value="red"> Red</label>
<label for="green"><input type="radio" name="color" id="green" value="green"> Green</label>
<label for="blue"><input type="radio" name="color" id="blue" value="blue"> Blue</label>
</form>
<!-- end snippet -->
Or like this:
const searchParams = new URLSearchParams(window.location.search);
if (searchParams.has("color")) {
// Because ID equals value, we can do:
const radio = document.getElementById(searchParams.get("color"));
radio.checked = true;
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论