试图验证我的单选按钮,但它不起作用

时间:2013-12-16 21:53:09

标签: javascript jquery html validation radio-button

就java脚本验证而言,我是一个极端的新手,所以如果我的代码中的所有内容都错了,我不会感到惊讶。

我正在尝试验证我的单选按钮。

我之前使用过这种格式来尝试这样做:

if (document.ExamEntry.GCSE.checked == true) {
confirm("You have selected GCSE. Is this correct?");
if (document.ExamEntry.A2.checked == true) {
confirm("You have selected GCSE. Is this correct?");
if (document.ExamEntry.A2.checked == true) {
confirm("You have selected A2. Is this correct?");

因为我希望它为每个单选按钮发送消息,但当然这不起作用。 (sumbit按钮通过转发到下一页工作,但取消按钮做了同样的事情,因为它没有给出一个我不知道该怎么做的命令)我被告知onClick命令会很好,但我试过它失败了,因为我不太确定如何应用它。

所以我尝试了这个:(我现在的新代码)

functioncheckRadio  () {
        var level = "";
        var qualification = document.ExamEntry.Rbutton.value;
        var i;

        for (i=0; i <qualification; i++) {
            if (document.ExamEntry.qualification[i].checked) {
                    level = document.ExamEntry.Rbutton.value;
                    break;
            }
        }
        if (level == "") {
            document.getElementById("Rbutton").innerHTML = "You must
            select a qualification level";
            return false;
        }
        else {
            document.getElementById("Rbutton").innerHTML = "";
            return = true;
        }
    }

这是我的HTML:

  <td id="RadioGCSE">GCSE</td>
  <td><input type="radio" name="Rbutton" value="GCSE" id="r1" checked = "checked" /></td>
  <tr>
  <td id="RadioAS">AS</td>
  <td><input type="radio" name="Rbutton" value="AS" id="r2" /></td>
  </tr>
  <td id="RadioA2">A2</td>
  <td><input type="radio" name="Rbutton" value="A2" id="r3" /></td>
  <tr>

我的意图是验证每个单选按钮。例如: 如果选择了GCSE,那么它将会显示以下消息:“您已选择GCSE。这是否正确”,提示框在单击时将其转发到下一页,或者取消按钮仅停止事件以便用户停留在同一页面上,以便他们可以选择其他选项。

我为长代码/写作量道歉。我是一个明显的新手。

2 个答案:

答案 0 :(得分:0)

每个输入都应该有一个唯一ID。

<td id="RadioGCSE">GCSE</td>
  <td><input type="radio" id="Rbutton1" name="Rbutton1" value="GCSE" id="r1" checked = "checked" /></td>
  <tr>
  <td id="RadioAS">AS</td>
  <td><input type="radio" id="Rbutton2" name="Rbutton2" value="AS" id="r2" /></td>
  </tr>
  <td id="RadioA2">A2</td>
  <td><input type="radio" id="Rbutton3" name="Rbutton2" value="A2" id="r3" /></td>
  <tr>

你也必须使用“getElementById”或更好的方式验证,使用“getElementById”

if (document.getElementById('Rbutton1').checked == true) {
    confirm("You have selected GCSE. Is this correct?");
}
if (document.getElementById('Rbutton2').checked == true) {
    confirm("You have selected GCSE. Is this correct?");
}
if (document.getElementById('Rbutton3').checked == true) {
    confirm("You have selected A2. Is this correct?");
}

在这里工作的示例: http://jsfiddle.net/rv9uu/2/

答案 1 :(得分:0)

也许你可以试试这段代码。它会提示您选择的单选按钮的值。

脚本:

<script type="text/javascript" language="javascript">
<!--
function CheckRadio() {
     var rdio = document.getElementsByTagName('input');

     for (var i=0; i<rdio.length; i++) {
      if (rdio[i].type == 'radio' && rdio[i].checked) {
          alert("You selected " + rdio[i].value); }
     }
}
-->
</script>

HTML:

<form method="post" action="">
    <input type="radio" name="Rbutton" value="GCSE" id="r1" />GCSE<br />
    <input type="radio" name="Rbutton" value="AS" id="r2" />AS<br />
    <input type="radio" name="Rbutton" value="A2" id="r3" />A2<br /><br />
    <input type="button" name="btn" value="Submit" onclick="javascript: CheckRadio()">
</form>