Question

我正在开发一个从mysql数据库中提取数据的测验，并将结果显示为单选按钮。单选按钮基于key =＆gt;值填充，并通过简单的forloop生成。这已经做了很多次，简单的谷歌搜索和研究将产生完成此任务所需的所有结果。我正在拥有或正在拥有的问题（在我决定用jquery做之前）是当我提交表单时它会执行javascript函数来验证是否已经选择了一个按钮，但是当你选择其他选项时比第一个单选按钮，你会收到相同的“选择”警告，如果你没有选择任何按钮，你会得到。选择第一个单选按钮将返回true并执行getCheckedValue函数调用。看起来好像，脚本只识别我有一个输入类型并且不理解迭代其余的按钮。我已经重构了这个函数十几次，但仍然不知道为什么这不起作用。

<?php
    foreach ($dataReturn as $j => $value){
       echo "<input type='radio' class='answer' id='radiobtn' name='radiobtn' value='".$j."'>" .$value." </input><br/>";
    }
?>

上面是生成单选按钮的循环（仅供参考，$ dataReturn是混合关联数组的返回值。（按预期工作）单击提交按钮时，它会调用以下javascript函数。

    function isNull(){
    var isChecked = false;
    var radiobutton = document.getElementsByName('radiobtn');
    for (var i=0; i <= radiobutton.length; i++){
        if (radiobutton[i].checked){
            return true;
            var answer = radiobutton[i].value;
            getCheckedValue(answer);//using this just for testing selected value
        }else { 
        alert("Make a selection.");
        }
    return false;
    }
}

我无法弄清楚为什么这不起作用。如上所述，使用jquery这非常有效。

Answer 1

尝试以下代码。在for循环结束之前，您不希望触发警报或返回false。

 function isNull(){
    var isChecked = false;
    var radiobutton = document.getElementsByName('radiobtn');
    for (var i=0; i <= radiobutton.length; i++){
        if (radiobutton[i].checked){
            var answer = radiobutton[i].value;
            getCheckedValue(answer);//using this just for testing selected value
            return true;
        }
    }
    alert("Make a selection.");
    return false;
}

此外，您的PHP代码为所有单选按钮提供相同的ID。那很不好;这样做违反了w3c标准。

Answer 2

你的FOR循环：由于JS使用从零开始的数组，你不能拥有＆lt; = ，否则它会寻找比你拥有的索引更高的索引。请改用＆lt; ;
我移动了您的验证，以确定是否在循环外检查了任何字段以使管理更容易。这种方式更清洁，而不是担心在它们中间突然出现循环。

下面：

function isNull() {
    var isChecked = false;
    var radiobutton = document.getElementsByName('radiobtn');
    for (var i=0; i < radiobutton.length; i++) {
        if (radiobutton[i].checked) {
            isChecked = true;
        }
    }

    if ( !isChecked ) {
        alert("Make a selection.");
        return false;
    }
}

我不知道您的表单标签的外观，但如果没有检查无线电字段，您需要阻止表单提交：

<form action="" method="post" onSubmit="return isNull();">

javascript函数验证单选按钮给出奇怪的输出。

2 个答案: