我将如何编写考虑多个单选按钮和变量输出的 JavaScript，具体取决于选择的单选按钮

How would I write JavaScript that accounts for multiple radio buttons and variable out comes depending on what radio button were selected?

本文关键字：单选按钮 JavaScript 输出 选择 取决于 变量 何编写      更新时间：2023-09-26

就像标题说的那样，我正在尝试编写考虑多个单选按钮（<input type="radio">）的JavaScript，并且变量输出取决于选择的单选按钮，然后根据html <button>的请求显示结果。我一直在研究，试图找到适合我正在尝试做的事情的 JavaScript 代码，到目前为止，这就是我发现的： var myFunc = function （） { 警报（"1"）;
};

myFunc(); // alerts '1'
var myFunc = function () {
    alert('2');  
};
myFunc(); // alerts '2'

和

<script>
function myFunction()
{
document.getElementById("demo").innerHTML="PASSED!";
}
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>

和

var checked = false, radios = document.getElementsById('radiogroup1');
for (var i = 0, radio; radio = radios[i]; i++) {
    if (radio.checked) {
        checked = true;
        break;
    }
}
if (!checked) {
    alert("Please select option one");
    radios.focus();
    return false;
}
return true;

.然后，我开始尝试将它们组合成一个功能代码，并得到这个：

`<head>
 <script type="text/javascript">
    var myFunc = function ('1') {
        var checked = false, radios = document.getElementById('_pass1');
        var checked = false, radios = document.getElementById('_pass2');
        var checked = false, radios = document.getElementById('_pass3');
        var checked = false, radios = document.getElementById('_pass4');
    for (var i = 0, radio; radio = radios[i]; i++) {
        if (radio.checked) {
            checked = true;
            document.getElementById('pass_fail_').innerHTML="PASSED!";
            break;
        }
    }
    if (!checked) {
        alert("Please select all options");
        radios.focus();
        return false;
    }
    return true;
    break;
    var myFunc = function ('2') {
        var checked = false, radios = document.getElementById('_pass1');
        var checked = false, radios = document.getElementById('_pass2');
        var checked = false, radios = document.getElementById('_pass3');
        var checked = false, radios = document.getElementById('_fail4');
    for (var i = 0, radio; radio = radios[i]; i++) {
        if (radio.checked) {
            checked = true;
            document.getElementById('pass_fail_').innerHTML="PASSED!";
            break;
        }
    }
    if (!checked) {
        alert("Please select all options");
        radios.focus();
        return false;
    }
    return true;
    break;
 myFunc('1); // function '1', function '2', function '3', function '4',            function '5', function '6', function '7', function '8', function '9', function '10', function '11', function '12', function '13', function '14', function '15', function '16'        </script>                           
`</head>
`<body>
    <p><b>Important Text</b></p>
    </br>
    <form id="_form_3">
        <input type="radio" name="grade" id="_pass3" value="pass"><font color="green">Pass</font></br>
        <input type="radio" name="grade" id="_fail3" value="fail"><font color="red">Fail</font>
    </form>
    <p>COmments</p>
    <textarea cols="95" rows="15">
    </textarea>
    </br>
    <hr>
    <p><b>Step, Slide, Switch</b><p>
    </br>
    <form id="_form_4">
        <input type="radio" name="grade" id="_pass4" value="pass"><font color="green">Pass</font></br>
        <input type="radio" name="grade" id="_fail4" value="fail"><font color="red">Fail</font>
     </form>
     <p>Comments</p>
     <textarea cols="95" rows="15">
     </textarea>
     </br>
     <hr>
     </form>
     <button onclick="myFunc('1')">PRESSS ME!</button>
     <p id="pass_fail_"></p>
`</body>
 `</html>

现在这不起作用，并且显然缺少一些我保留的部分，以试图限制您的眼睛疲劳（所有省略的部分都遵循共享的类似路线），但无论是 JavaScripts 部分的失败还是我的编码技能，倾向于后者，我不知道。就像标题说的那样，我正在尝试编写考虑多个单选按钮（<input type="radio">）的JavaScript，并且变量输出取决于选择的单选按钮，然后根据html <button>的请求显示结果，我有第二个问题与第一个问题有关。JavaScript 可以运行一个很好的脚本来完成我正在尝试做的事情，或者我应该使用 Flash 或 .net 语言吗？

开始时，最好编写一两行代码并让它们工作。然后逐步添加更多代码，测试并让它们工作。编写非工作代码板不是一种有效的方法。

一些评论：

> var myFunc = function () {
>   alert('1');
> };

我不明白为什么在函数声明可用且更可靠时使用函数表达式。

function myFunc() {...}

然后是：

> var checked = false, radios = document.getElementsById('radiogroup1');

您寻求的方法是document.getElementById，注意单数，而不是复数。如果您有一组同名的单选按钮，则可以使用：

var radios = document.getElementsByName(name);

或者，如果它们采用以下形式：

var radios = document.forms[n][name];

和

> var myFunc = function ('2') {

形式参数列表必须包含零个或多个有效标识符，即不是一个。标识符不能是字符串文本，也不能以数字开头。并使用函数声明：

function myFunc (a2) {
  ... 
}

然后在这里：

> var checked = false, radios = document.getElementById('_pass1');
> var checked = false, radios = document.getElementById('_pass2');
在这里，您将值分配给

相同的变量，选中和无线电将具有最后一次分配给它们的任何值。

>    if (radio.checked) {
>        checked = true;
>        document.getElementById('pass_fail_').innerHTML="PASSED!";
>        break;
>    }

在这里，您可以删除选中的变量和 break 语句并简单地返回 true，然后您不需要以下内容，因为只有在选中为 false 时才会到达它。

    if (radio.checked) {
      document.getElementById('pass_fail_').innerHTML="PASSED!";
      return true;
    }
    alert("Please select all options");
    radios.focus();
    return false;
相关文章：