使用JavaScript从单选按钮获取价值
[英]getting value from radio button using javaScript
问题描述
我正在尝试使用Javascript将值从单选按钮传递到下一个HTML页面。 但是我想出的Javascript似乎无法访问单选按钮。 为什么？
HTML代码：
<body>
<div id="frontContent">
<p id ="levelContent">Levels: </p>
<form id="levelSelection">
<input type="radio" name="level" value="1" >Level 1</input>
<input type="radio" name="level" value="2">Level 2</input>
</form>
<p id="startButton"><a href="index.html">Start</a></p>
<p id ="scoreBoard">Highest Score: <span id="score">0</span></p>
</div>
</body>
JavaScript代码：
var radios = document.getElementsByName('level');
alert(radios.length);
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
break;
}
}
6 个解决方案
解决方案1
2 已采纳 2015-06-16 16:35:37
此代码可能会帮助：
<!DOCTYPE html>
<html>
<body>
<div id="frontContent">
<p id ="levelContent">Levels: </p>
<form id="levelSelection">
<input type="radio" name="level" value="1" >Level 1</input>
<input type="radio" name="level" value="2">Level 2</input>
</form>
<p id="startButton"><a href="index.html">Start</a></p>
<input type="button" onclick="clickButton()" value="clickMe"/>
<p id ="scoreBoard">Highest Score: <span id="score">0</span></p>
</div>
<script>
var radios = document.getElementsByName('level');
alert(radios.length);
function clickButton(){
var radioVal = 0;
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
radioVal = radios[i].value;
break;
}
}
window.location.href= "index.html?radioValue="+radioVal;
}
</script>
</body>
</html>
解决方案2
0 2015-06-16 16:36:45
<div id="frontContent">
<p id ="levelContent">Levels: </p>
<form id="levelSelection">
<input type="radio" onclick="checkRadio()" name="level" value="1" >Level 1</input>
<input type="radio" onclick="checkRadio()" name="level" value="2" checked='true'>Level 2</input>
</form>
<p id="startButton"><a href="index.html">Start</a></p>
<p id ="scoreBoard">Highest Score: <span id="score">0</span></p>
</div>
<script>
function checkRadio(){
var radios = document.getElementsByName('level');
alert(radios.length);
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
callRedirect(radios[i].value);
break;
}
}
}
function callRedirect(selectedVal){
window.location.href = "urlHTMLPageURL?radioOption="+selectedVal;
}
</script>
解决方案3
0 2015-06-16 16:39:50
如果要发送到另一个页面，则必须使用action和method设置<form>标记，例如： method="get" action="index.html" ，并使用提交按钮代替链接。
因此，在另一页中，您可以从查询字符串中获取值。
解决方案4
-1 2015-06-16 16:23:39
确保将JavaScript放在文件的末尾，如下所示：
<body>
<div id="frontContent">
<p id ="levelContent">Levels: </p>
<form id="levelSelection">
<input type="radio" name="level" value="1" >Level 1</input>
<input type="radio" name="level" value="2">Level 2</input>
</form>
<p id="startButton"><a href="index.html">Start</a></p>
<p id ="scoreBoard">Highest Score: <span id="score">0</span></p>
</div>
<script>
var radios = document.getElementsByName('level');
alert(radios.length);
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
break;
}
}
</script>
</body>
解决方案5
-1 2015-06-16 16:26:48
最初，没有选择任何无线电选项。 所以代码不会输入if块
http://jsfiddle.net/sez8c3xL/查看小提琴的示例
<div id="frontContent">
<p id ="levelContent">Levels: </p>
<form id="levelSelection">
<input type="radio" name="level" value="1" >Level 1</input>
<input type="radio" name="level" value="2" checked='true'>Level 2</input>
</form>
<p id="startButton"><a href="index.html">Start</a></p>
<p id ="scoreBoard">Highest Score: <span id="score">0</span></p>
</div>
<script>
var radios = document.getElementsByName('level');
alert(radios.length);
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
alert(radios[i].value);
break;
}
}
</script>
解决方案6
-1 2015-06-16 16:33:59
您好，这里是获取单选按钮值的工作脚本：
<script>
var elem = document.getElementById('levelSelection').elements;
for(var i = 0; i < elem.length; i++)
{
if(elem[i].type =="radio" && elem[i].checked == true)
{
alert(elem[i].value);
}
}
</script>
使用javascript从单选按钮获取值
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.