我有一个页面上的调查，有5个问题。每个问题由 0 - 10 分组成。每个按钮都是组中的一个单选按钮。我将此表单数据传递到另一个页面，并得到您典型的获取URL。我用javascript解析它，可以获取每个组的值。示例获取我拥有的网址是这个 /graphs.html?happiness=8&enthusiastic=7&resilient=9
我现在有价值进入一个变量
function processScore() {
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
h = unescape(temp[1]);
temp = parameters[1].split("=");
e = unescape(temp[1]);
temp = parameters[2].split("=");
r = unescape(temp[1]);
temp = parameters[3].split("=");
o = unescape(temp[1]);
temp = parameters[4].split("=");
w = unescape(temp[1]);
document.getElementById("happiness").innerHTML = h;
document.getElementById("enthusiastic").innerHTML = e;
document.getElementById("resilient").innerHTML = r;
document.getElementById("optimistic").innerHTML = o;
document.getElementById("wellness").innerHTML = w;
}
processScore();
我想重新创建相同的调查，在单选按钮上选中他们的答案，但不知道该怎么做。
所以我正在尝试根据我从 HTML get URL 获得的 JavaScript 变量中的值将单选按钮设置为在组中选中。
我不知道还能怎么说。我有一个包含 11 个按钮的单选按钮组。我想根据在 get URL 中传递的数据将其中一个设置为选中。
我有一个带有单选按钮组的表单。 该表格只有 5 个编号为 0 - 10 的问题。 每个都是一个单选按钮。 当他们点击提交时，我得到一个标准的获取 URL，例如 /graphs.html?happiness=8&enthusiastic=7&resilient=9 .我能够使用上面的JavaScript解析此URL。我想重新创建表单，但每个问题我都希望他们的答案打勾。所以对于问题1，幸福，他们的答案是8。所以我希望选中与 8 相关的单选按钮。等等。
不知道你的标记是什么样的，所以很难说。但是，假设幸福是指每个问题的容器，里面有单选按钮，那么类似的东西可能会起作用吗？
function processScore() {
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
h = unescape(temp[1]);
temp = parameters[1].split("=");
e = unescape(temp[1]);
temp = parameters[2].split("=");
r = unescape(temp[1]);
temp = parameters[3].split("=");
o = unescape(temp[1]);
temp = parameters[4].split("=");
w = unescape(temp[1]);
document.querySelectorAll("happiness input[type='radio']")[parseInt(h)].checked = true;
document.getElementById("enthusiastic")[parseInt(e)].checked = true;
document.getElementById("resilient input[type='radio']")[parseInt(r)].checked = true;
document.getElementById("optimistic input[type='radio']")[parseInt(0)].checked = true;
document.getElementById("wellness input[type='radio']")[parseInt(w)].checked = true;
}
processScore();
这就是我现在所处的位置。我刚刚看到了你的答案，并会尝试一下。但是我还不完全理解。我的代码中有一节只是简单地解析 URL 以确保它仍然正确运行。伙计，我想我应该回到网络，把编程的东西留给别人。大声笑
{<html lang = "en">
<head>
<style>
#happiness, #enthusiastic, #resilient, #optimistic, #wellness { color: white; background-color:black; padding-left:8px; padding-right:8px; }
.titlebox {
width:40%;
height:3%;
padding:3px;
border:1px solid #000000;
background-color:#EFEFEF;
left: auto;
right: auto;
position: relative;
}
.title {
text-align:center;
margin:auto;
font-family:"calibri";
font-size:28px;
}
.questions {
text-align: left;
margin: auto;
font-family: "calibri";
font-size: 23px;
display: inline-block;
}
#wrap {
float: left;
position: relative;
left: 50%;
}
#content {
float: left;
position: relative;
}
.underline {
border-bottom: 1px solid black;
width: 95%;
margin: auto;
}
.scaleleft {
color: rgb(89,89,89);
font-size: 21px;
font-family: "calibri";
text-align: left;
padding-left: 10px;
}
.scalecenter {
color: rgb(89,89,89);
font-size: 21px;
font-family: "calibri";
text-align: center;
}
.scaleright {
color: rgb(89,89,89);
font-size: 21px;
font-family: "calibri";
text-align: right;
padding-right: 10px;
}
.footer {
text-align: center;
margin: auto;
font-family: "calibri";
font-size: 19px;
}
.page {
width: 100%;
text-align: left;
margin: 0 auto;
overflow: scroll;
<!-- overflow: hidden; -->
max-height: 500px;
<!-- line-height: 1.2em; -->
}
.body {
text-align: center
}
.table {
width: 100%;
}
.numbersPlacementRight {
font-size: 19px;
font-family: "calibri";
text-align: right;
}
.numbersPlacementCenter {
font-size: 19px;
font-family: "calibri";
text-align: center;
}
.numbersPlacementLeft {
font-size: 19px;
font-family: "calibri";
text-align: left;
}
.button {
size: 25;
value: "Submit"
}
.box {
box-sizing: border-box;
width: 960px;
height: 500px;
padding: 20px;
border: 1px solid #DDD;
overflow: hidden;
}
.button {
height: 40px;
width: 80px;
}
</style>
</head>
<body class="page">
<div class="titlebox title"><b>Wellness Survey</b></div>
<div>
<p>
<div class="questions">1. On average, during the last 7 DAYS, how happy have you felt?</div>
</br>
</br>
<table class="table ">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "0" id = "H0"/> <label for = "H0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "1" id = "H1"/> <label for = "H1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "2" id = "H2"/> <label for = "H3">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "3" id = "H3"/> <label for = "H3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "4" id = "H4"/> <label for = "H4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "5" id = "H5"/> <label for = "H5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "6" id = "H6"/> <label for = "H6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "7" id = "H7"/> <label for = "H7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "8" id = "H8"/> <label for = "H8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "9" id = "H9"/> <label for = "H9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "happiness" value = "10" id = "H10"/> <label for = "H10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />happy</td>
<td class="scalecenter">Midly<br />happy</td>
<td class="scalecenter">Moderately<br />happy</td>
<td class="scalecenter">Markedly<br />happy</td>
<td class="scaleright">Extremely<br />happy</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">2. On average, during the last 7 DAYS, how enthusiastic have you felt?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "0" id = "E0" /><label for = "E0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "1" id = "E1"/><label for = "E1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "2" id = "E2"/><label for = "E2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "3" id = "E3"/><label for = "E3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "4" id = "E4"/><label for = "E4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "5" id = "E5"/><label for = "E5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "6" id = "E6"/><label for = "E6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "7" id = "E7"/><label for = "E7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "8" id = "E8"/><label for = "E8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "9" id = "E9"/><label for = E9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "enthusiastic" value = "10" id = "E10"/><label for = "E10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />enthusiastic</td>
<td class="scalecenter">Midly<br />enthusiastic</td>
<td class="scalecenter">Moderately<br />enthusiastic</td>
<td class="scalecenter">Markedly<br />enthusiastic</td>
<td class="scaleright">Extremely<br />enthusiastic</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">3. On average, during the last 7 DAYS, how resilient have you felt?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "0" id = "R0"/><label for = "R0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "1" id = "R1"/><label for = "R1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "2" id = "R2"/><label for = "R2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "3" id = "R3"/><label for = "R3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "4" id = "R4"/><label for = "R4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "5" id = "R5"/><label for = "R5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "6" id = "R6"/><label for = "R6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "7" id = "R7"/><label for = "R7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "8" id = "R8"/><label for = "R8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "9" id = "R9"/><label for = "R9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "resilient" value = "10" id = "R10"/><label for = "R10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />resilient</td>
<td class="scalecenter">Midly<br />resilient</td>
<td class="scalecenter">Moderately<br />resilient</td>
<td class="scalecenter">Markedly<br />resilient</td>
<td class="scaleright">Extremely<br />resilient</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">4. On average, during the last 7 DAYS, how optimistic have you felt?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "0" id = "O0" /> <label for = "O0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "1" id = "O1"/> <label for = "O1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "2" id = "O2"/> <label for = "O2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "3" id = "O3"/> <label for = "O3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "4" id = "O4"/> <label for = "O4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "5" id = "O5"/> <label for = "O5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "6" id = "O6"/> <label for = "O6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "7" id = "O7"/> <label for = "O7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "8" id = "O8"/> <label for = "O8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "9" id = "O9"/> <label for = "O9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "optimistic" value = "10" id = "O10"/> <label for = "O10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />optimistic</td>
<td class="scalecenter">Midly<br />optimistic</td>
<td class="scalecenter">Moderately<br />optimistic</td>
<td class="scalecenter">Markedly<br />optimistic</td>
<td class="scaleright">Extremely<br />optimistic</td>
</tr>
</table>
</br>
</br>
<p>
<div class="questions">5. On average, during the last 7 DAYS, how would you rate your mental wellness?</div>
</br>
</br>
<table class="table">
<tr>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "0" id = "W0" /> <label for = "W0">0</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "1" id = "W1"/> <label for = "W1">1</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "2" id = "W2"/> <label for = "W2">2</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "3" id = "W3"/> <label for = "W3">3</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "4" id = "W4"/> <label for = "W4">4</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "5" id = "W5"/> <label for = "W5">5</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "6" id = "W6"/> <label for = "W6">6</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "7" id = "W7"/> <label for = "W7">7</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "8" id = "W8"/> <label for = "W8">8</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "9" id = "W9"/> <label for = "W9">9</label></td>
<td class="numbersPlacementCenter"><input type = "radio" name = "wellness" value = "10" id = "W10"/> <label for = "W10">10</label></td>
<td> </td>
</tr>
</table>
<div class="underline"></div>
</p>
<table class="table">
<tr>
<td class="scaleleft">Not at all<br />good</td>
<td class="scalecenter">Midly<br />good</td>
<td class="scalecenter">Moderately<br />good</td>
<td class="scalecenter">Markedly<br />good</td>
<td class="scaleright">Extremely<br />good</td>
</tr>
</table>
</br>
</br>
<!-- <form action="https://wild5wellness.weebly.com/hero-survey-results.html">
<input type="submit" value="submit" />
</form> -->
<input type="submit" value="Submit" />
</form>
</br>
</br>
</br>
<div class="footer">Copyright 2017, Dr. Saundra Jain and Dr. Rakesh Jain</div>
</div>
</div>
<h2>Testing: </h2>
<p><b>happiness: </b><span id="happiness" ></span></p>
<p><b>enthusiastic: </b><span id="enthusiastic"></span></p>
<p><b>resilient: </b><span id="resilient" ></span></p>
<p><b>optimistic: </b><span id="optimistic"></span></p>
<p><b>wellness: </b><span id="wellness"></span></p>
<script language="JavaScript">
function processScore()
{
var parameters = location.search.substring(1).split("&");
var temp = parameters[0].split("=");
h = unescape(temp[1]);
temp = parameters[1].split("=");
e = unescape(temp[1]);
temp = parameters[2].split("=");
r = unescape(temp[1]);
temp = parameters[3].split("=");
o = unescape(temp[1]);
temp = parameters[4].split("=");
w = unescape(temp[1]);
document.getElementById("happiness").innerHTML = h;
document.getElementById("enthusiastic").innerHTML = e;
document.getElementById("resilient").innerHTML = r;
document.getElementById("optimistic").innerHTML = o;
document.getElementById("wellness").innerHTML = w;
}
processScore();
</script>
<script language="JavaScript">
function checkradio() {
if (document.getElementById("happiness").value == 1) {
document.getElementById("H1").checked == true;
}
else {
document.getElementById("H2").checked == true;
}
}
</script>
<div>
</div>
</body>
</html>