如何确定是否已以编程方式检查无线电

How to identify whether or not a radio has been checked programmatically?

本文关键字：方式 检查 无线电 编程 何确定 是否      更新时间：2023-09-26

我有一个表单页面，用户可以在其中输入ID，相应的配置文件数据从mysql中提取并显示在表单中，以便用户可以对其进行编辑。

一个

元素是一组收音机，因此您可以选择一个年级（即"1"、"2"、"3"等）。

当用户提供 ID 时，将进行 AJAX 调用以使用数据预填充表单，包括选择适当的无线电。

问题：

用户必须选择年份级别才能提交表单。我用verifyForm()的方法检查这一点：

function verifyForm() {
    if( !document.addStudentForm.elements["yearLevel"].checked ) {
        alert( "You must select a year level before submitting." );
        return false;
    }
};

我希望这会检查yearLevel，如果未选择某个选项，则警报/返回 false。

但是，当 AJAX 数据预先选择yearLevel无线电时，这仍然像用户没有选择无线电一样。

无线电由 js 通过以下代码填充：

document.getElementById( "yearLevel_<?=$student['student']->get('yearLevel')?>" ).checked = true;

编辑：这是相关的 HTML。

<form name="addStudentForm" action="validation/updateStudentValidate.php" method="POST" onSubmit="return verifyForm()">                                 
    <input type="radio" value="1" name="yearLevel" disabled id="yearLevel_1" /> 1
    <input type="radio" value="2" name="yearLevel" disabled id="yearLevel_2" /> 2
    <input type="radio" value="3" name="yearLevel" disabled id="yearLevel_3" /> 3
    <input type="radio" value="4" name="yearLevel" disabled id="yearLevel_4" /> 4
    <input type="radio" value="5" name="yearLevel" disabled id="yearLevel_5" /> 5
    <input type="radio" value="6" name="yearLevel" disabled id="yearLevel_6" /> 6
</form>

问题：

如何让我的 javascript 正确识别无线电是否已被选中，无论它是手动选择还是以编程方式选择的？

取自这篇 StackOverflow 帖子并针对此示例和速度进行了调整，您可以在 AJAX 成功返回中拥有以下内容：

var radios = document.getElementsByName('yearLevel'),
    i = radios.length,
    isChecked = false;
while(i--){
    if (radios[i].checked) {
        isChecked = true;
        break;
    }
}

然后，当调用该函数时：

function verifyForm(){
    if(!isChecked){
        alert( "You must select a year level before submitting." );
        return false;
    }
};

这是假设您的 HTML 中没有任何名称为 yearLevel 的任何其他项目。

这实际上会返回值，我想我不确定您是否要查看选中的特定项目，或者只是它们已被选中。此函数将同时执行这两项操作。

相关文章：