【问题标题】:How to identify whether or not a radio has been checked programmatically?如何识别收音机是否已以编程方式检查?
【发布时间】:2013-11-20 17:56:46
【问题描述】:

我有一个表单页面,用户可以在其中输入一个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。

但是,当 yearLevel 无线电被 AJAX 数据预先选择时,这仍然表现得好像用户没有选择无线电一样。

收音机由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 正确识别收音机是否已被检查,无论它是手动选择的还是以编程方式选择的?

【问题讨论】:

  • 你的 AJAX 函数如何选择单选按钮?
  • @Robb:添加到原帖中。
  • 并且您已经验证它确实选中了该框?
  • @PlantTheIdea:是的,我已经确认它确实填充正确。
  • 好吧,您确认它已正确选中该框,所以我认为禁用的部分不是您的问题。您是否尝试像我在回答中那样循环遍历它们?这可能只是您检查 checked 属性的元素的方式,因为该属性用于单个元素而不是集合。

标签: javascript ajax forms radio-button


【解决方案1】:

取自 this StackOverflow post 并针对此示例和速度进行了调整,您可以在 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 的项目。

这实际上会返回该值,我想我不确定您是否希望查看特定项目的检查,或者只是它们已被检查。这个函数会同时做这两个。

【讨论】:

  • 老兄冷静下来,我没有拒绝投票的访问级别:(你去吧,我投了赞成票..
  • 啊抱歉,这是我草率下结论的结果。
  • 这解决了我的问题。本来希望我能用一条线逃脱,但哦,好吧:)谢谢你的帮助!
  • 也只是一个注释,i-- 后面缺少一个分号。
猜你喜欢
  • 2016-05-29
  • 2015-08-26
  • 2015-02-18
  • 2016-02-16
  • 2013-04-21
  • 1970-01-01
  • 2011-08-17
  • 1970-01-01
  • 2014-04-15
相关资源
最近更新 更多