使用Javascript设置单选按钮验证

时间:2013-11-19 05:32:57

标签: javascript html

我正在尝试使用Javascript验证2组单选按钮。它正在使用一套但不是我添加另一台收音机(第二次访客)。这是我的代码:

HTML:

<form name="form1" action="#" method="post"> 
    First time visitor?:<br/>
    <label for="s1">Yes</label>
    <input type="radio" id="radio1" name="firsttime" value="1"/>
    <br/>
    <label for="s2">No</label>
    <input type="radio" id="radio2" name="firsttime" value="2"/>

    <br/>     

    Second time visitor?:<br/>
    <label for="s1">Yes</label>
    <input type="radio" id="radio1" name="secondTime" value="1"/>
    <br/>
    <label for="s2">No</label>
    <input type="radio" id="radio2" name="secondTime" value="2"/>

    <br/>     

    <button type="submit" name="nextBTN" onclick="return validateForm();">Next</button><br/>
</form>

和Javascript代码:

function validateForm() {
    var radios = document.getElementsByName("firsttime");
    var radios2 = document.getElementsByName("secondtime");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    var j = 0;
    while (!formValid && i < radios2.length) {
        if (radios2[j].checked) formValid = true;
        j++;        
    }


    if (!formValid) alert("Must check some option!");
    return formValid;



}

1 个答案:

答案 0 :(得分:0)

乍一看,我可以看到在您的第二个while循环中,您仍然会检查radios变量而不是radios2变量。

您还在第二个循环中使用了i变量而不是j。并且您与secondTime(vs secondtime)的大小写不一致。

这是您的代码的工作版本: http://jsfiddle.net/8edCn/

编辑:根据您的评论更新版本:http://jsfiddle.net/8edCn/2/