使用 javaScript 从单选按钮获取值

Question

我正在尝试使用 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;
    }
}

Answer 1

一定要把你的 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 2

最初none的单选选项被选中。所以代码没有进入if块

http://jsfiddle.net/sez8c3xL/ 查看 fiddle 示例

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

你好，这是获取单选按钮值的工作脚本：

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

Answer 4

此代码可能有帮助：

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

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

如果要发送到另一个页面，则必须使用 action 和 method 设置 <form> 标记，例如：method="get" action="index.html"，并使用提交按钮而不是 link.

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

使用 javaScript 从单选按钮获取值

getting value from radio button using javaScript

html

javascript

radio-button