JavaScript 测验 Valadition

Question

我在 JavaScript 中验证 4 个问题多项选择测验时似乎遇到了一些问题。现在，如果没有选择任何答案，则会弹出警报，但即使只选择了一个答案，警报也不会弹出。我正在将我的函数作为提交按钮的 onclick 运行。我对 JavaScript 和 JQuery 相当陌生，但有其他编程经验，所以问题可能很简单，但我看不到它。其功能是:

function quiz1(){

    if (!$("input[@name=q1]:checked").val() ||
        !$("input[@name=q2]:checked").val() ||
        !$("input[@name=q3]:checked").val() ||
        !$("input[@name=q4]:checked").val() ||
        !$("input[@name=q5]:checked").val()
        ) {
        alert("You're not done yet!");
    }
}

html 是:

<p class="question">1. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q1" value="a" id="q1a"><label for="q1a">Answer 1</label><br/>
    <input type="radio" name="q1" value="b" id="q1b"><label for="q1b">Answer 2</label><br/>
    <input type="radio" name="q1" value="c" id="q1c"><label for="q1c">Answer 3</label><br/>
    <input type="radio" name="q1" value="d" id="q1d"><label for="q1d">Answer 4</label><br/>
</ul>

<p class="question">2. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q2" value="a" id="q2a"><label for="q2a">Answer 1</label><br/>
    <input type="radio" name="q2" value="b" id="q2b"><label for="q2b">Answer 2</label><br/>
    <input type="radio" name="q2" value="c" id="q2c"><label for="q2c">Answer 3</label><br/>
    <input type="radio" name="q2" value="d" id="q2d"><label for="q2d">Answer 4</label><br/>
</ul>

<p class="question">3. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q3" value="a" id="q3a"><label for="q3a">Answer 1</label><br/>
    <input type="radio" name="q3" value="b" id="q3b"><label for="q3b">Answer 2</label><br/>
    <input type="radio" name="q3" value="c" id="q3c"><label for="q3c">Answer 3</label><br/>
    <input type="radio" name="q3" value="d" id="q3d"><label for="q3d">Answer 4</label><br/>
</ul>

<p class="question">4. What is the answer to this question?</p>

<ul class="answers">
    <input type="radio" name="q4" value="a" id="q4a"><label for="q4a">Answer 1</label><br/>
    <input type="radio" name="q4" value="b" id="q4b"><label for="q4b">Answer 2</label><br/>
    <input type="radio" name="q4" value="c" id="q4c"><label for="q4c">Answer 3</label><br/>
    <input type="radio" name="q4" value="d" id="q4d"><label for="q4d">Answer 4</label><br/>
</ul>

<div class="submit">
    <input type="submit" onclick="quiz1()" value="Check Answers">
</div>

Answer 1

那里有一些语法错误。

之前:

function quiz1(){

    if (!$("input[@name=q1]:checked").val() ||
        !$("input[@name=q2]:checked").val() ||
        !$("input[@name=q3]:checked").val() ||
        !$("input[@name=q4]:checked").val() ||
        !$("input[@name=q5]:checked").val()
        ) {
        alert("You're not done yet!");
    }
}

之后:

function quiz1(){

  if (!$("input[name='q1']:checked").val() ||
      !$("input[name='q2']:checked").val() ||
      !$("input[name='q3']:checked").val() ||
      !$("input[name='q4']:checked").val()
      ) {
      alert("You're not done yet!");
  }

}

因此，使用 jquery，当您想要引用名称时，您必须像 html 中的 name 属性一样键入它，这对于任何属性选择器都是正确的，例如(data='', ng-someting=''...)而且你还有一对多的输入 XD

这是一个jsfiddle