JavaScript 如何获取选择的单选按钮的值

要获取选择的单选按钮的值，可以创建一个用户定义的函数，该函数获取具有name属性的所有单选按钮，并使用checked属性查找选择的单选按钮。checked属性返回True如果单选按钮被选择，否则返回False。如果网页上有多个单选按钮，首先获取所有input标签，然后显示类型为“radio”并且被选择的标签的所有值。

示例1： 下面的程序在用户点击提交按钮时显示选择的单选按钮的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
          How to get value of selected radio button using JavaScript ?
      </title>
</head>
 
<body>
    <p>
        Select a radio button and click on Submit.
    </p>
    Gender:
    <input type="radio" name="gender" value="Male">Male
    <input type="radio" name="gender" value="Female">Female
    <input type="radio" name="gender" value="Others">Others
    <br>
    <button type="button" onclick="displayRadioValue()">
        Submit
    </button>
    <br>
    <div id="result"></div>
    <script>
        function displayRadioValue() {
            var ele = document.getElementsByName('gender');
 
            for (i = 0; i < ele.length; i++) {
                if (ele[i].checked)
                    document.getElementById("result").innerHTML
                        = "Gender: " + ele[i].value;
            }
        }
    </script>
</body>
</html>

输出 :

示例2： 单击提交时，下面的程序将显示所有选中的单选按钮的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
          How to get value of selected radio button using JavaScript ?
      </title>
</head>
 
<body>
    <p>
        Select a radio button and click on Submit.
    </p>
    Gender:
    <input type="radio" name="Gender" value="Male">Male
    <input type="radio" name="Gender" value="Female">Female
    <input type="radio" name="Gender" value="Others">Others
    <br>
    Food Preference:
    <input type="radio" name="Food" value="Vegetarian">Vegetarian
    <input type="radio" name="Food" value="Non-Vegetarian">Non-Vegetarian
    <br>
    <button type="button" onclick="displayRadioValue()">
        Submit
    </button>
    <br>
    <div id="result"></div>
    <script>
        function displayRadioValue() {
            document.getElementById("result").innerHTML = "";
            var ele = document.getElementsByTagName('input');
            for (i = 0; i < ele.length; i++) {
                if (ele[i].type = "radio") {
 
                    if (ele[i].checked)
                        document.getElementById("result").innerHTML
                            += ele[i].name + " Value: "
                            + ele[i].value + "<br>";
                }
            }
        }
    </script>
</body>
</html>

输出：

JavaScript 如何获取选择的单选按钮的值