Question

我尝试使用Javascript将单选按钮中的值传递到下一个HTML页面。然而，我想出的Javascript似乎无法访问单选按钮。为什么呢？

HTML code：

<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;
    }
}

Answer 1

此代码可能有所帮助：

    <!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>

Answer 2

<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>

Answer 3

如果要发送到其他页面，则必须将<form>标记设为action和method，例如：method="get" action="index.html"，并使用提交按钮代替链接。

因此，在另一页中，您可以从查询字符串中获取值。

Answer 4

请务必将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>

Answer 5

最初没有选择任何无线电选项。所以代码不会进入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>

Answer 6

你好这里是获取单选按钮的工作脚本＆＃39;值：

<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从单选按钮获取值

6 个答案: