文章/答案/技术大牛

发布

社区首页 >问答首页 >带有jquery问题的多个单选按钮调用

问带有jquery问题的多个单选按钮调用
EN

Stack Overflow用户

提问于 2017-02-24 11:33:08

回答 1查看 68关注 0票数 0

我想做一个简单的测验，检查正确的答案，并计算在页面底部输出的分数。我可以用简单的js和html来做这件事，但我想用jquery做同样的事情。但是，当我在jquery版本中按下submit时，什么也没有发生(我是jquery的新手，找不到哪里出了问题)，提前谢谢！

//Question One Answer is 'a'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'a'

var score = 0;

checkAll = function() {

  var message;
  // var score = 0; 

  if ($("#question1").val() === "a") {
    score++;
  } else {
    return false;
  }

  if ($("#question2").val() === "b") {
    score++;
  } else {
    return false;
  }

  if ($("#question3").val() === "b") {
    score++;
  } else {
    return false;
  }

  if ($("#question4").val() === "b") {
    score++;
  } else {
    return false;
  }

  if ($("#question5").val() === "a") {
    score++;
  } else {
    return false;
  }

  message = "You got " + score + "out of five questions right!";
  $("#results").html(message);

  initialize = function() {
    $("#init").click(checkAll)
  };
};

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Form Example</title>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
  </script>

  <script type="text/javascript" src="quiz.js"></script>

</head>

<body>

  <h1>Geography Quiz</h1>


  <p>
    <label for="user">Name:</label>
    <input type="text" name="username" id="user" />
  </p>
  <div class="qheader">
    <p> 1) Which of the countries below is largest by area?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question1">a) Russia<br>
    <input type="radio" value="b" name="question1">b) China<br>
    <input type="radio" value="c" name="question1">c) USA<br>
    <input type="radio" value="d" name="question1">d) Canada<br>
  </div>

  <br>

  <div class="qheader">
    <p> 2) Which of these cities is United States Capital?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question2">a) New York<br>
    <input type="radio" value="b" name="question2">b) Washington D.C
    <input type="radio" value="c" name="question2">c) Chicago<br>
    <input type="radio" value="d" name="question2">d) Moscow<br>
  </div>

  <div class="qheader">
    <p> 3) Which of these cities is Spain's Capital?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question3">a) Barcelona<br>
    <input type="radio" value="b" name="question3">b) Madrid <br>
    <input type="radio" value="c" name="question3">c) Milan<br>
    <input type="radio" value="d" name="question3">d) Rome<br>
  </div>

  <div class="qheader">
    <p> 4) Which ocean is the largest?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question4">a) Arctic<br>
    <input type="radio" value="b" name="question4">b) Pacific<br>
    <input type="radio" value="c" name="question4">c) Indian<br>
    <input type="radio" value="d" name="question4">d) Atlantic<br>
  </div>

  <div class="qheader">
    <p> 5) Which of these rivers is largest in North America?</p>
  </div>
  <div class="questsel">
    <input type="radio" value="a" name="question5">a) Missouri River<br>
    <input type="radio" value="b" name="question5">b) Nile River <br>
    <input type="radio" value="c" name="question5">c) Amazon River<br>
    <input type="radio" value="d" name="question5">d) Yenisei River<br>
  </div>

  <p>
    <input type="button" id="init" value="Submit" />
  </p>

  <p id="results"></p>

  </form>

</body>

</html>

jquery

html

radio-button

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-24 11:48:19

首先，在checkAll()函数中包含initialize()函数。它应该是一个单独的函数。

其次，您永远不会调用initialize()。

第三，使用$("#question1").val()获取单选按钮的值，但是#用于匹配ID，而不是名称。获取单选按钮的值的方法是$(":radio[name=question1]:checked").val() (请参见jQuery get value of selected radio button)。

第四，只要答案是错的，你就会立即返回。你需要坚持下去，这样你才能报告总分。

第五，需要在函数中将score初始化为0。否则，您将把当前呼叫的分数与上次的分数相加。score应该只是函数中的一个局部变量，不需要全局变量。

//Question One Answer is 'a'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'b'
//Question One Answer is 'a'


checkAll = function() {

  var message;
  var score = 0; 

  if ($(":radio[name=question1]:checked").val() === "a") {
    score++;
  }

  if ($(":radio[name=question2]:checked").val() === "b") {
    score++;
  }

  if ($(":radio[name=question3]:checked").val() === "b") {
    score++;
  }

  if ($(":radio[name=question4]:checked").val() === "b") {
    score++;
  }

  if ($(":radio[name=question5]:checked").val() === "a") {
    score++;
  }

  message = "You got " + score + " out of five questions right!";
  $("#results").html(message);

};

initialize = function() {
  $("#init").click(checkAll)
};

initialize();

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>


<h1>Geography Quiz</h1>


<p>
  <label for="user">Name:</label>
  <input type="text" name="username" id="user" />
</p>
<div class="qheader">
  <p> 1) Which of the countries below is largest by area?</p>
</div>
<div class="questsel">
  <input type="radio" value="a" name="question1">a) Russia<br>
  <input type="radio" value="b" name="question1">b) China<br>
  <input type="radio" value="c" name="question1">c) USA<br>
  <input type="radio" value="d" name="question1">d) Canada<br>
</div>

<br>

<div class="qheader">
  <p> 2) Which of these cities is United States Capital?</p>
</div>
<div class="questsel">
  <input type="radio" value="a" name="question2">a) New York<br>
  <input type="radio" value="b" name="question2">b) Washington D.C
  <input type="radio" value="c" name="question2">c) Chicago<br>
  <input type="radio" value="d" name="question2">d) Moscow<br>
</div>

<div class="qheader">
  <p> 3) Which of these cities is Spain's Capital?</p>
</div>
<div class="questsel">
  <input type="radio" value="a" name="question3">a) Barcelona<br>
  <input type="radio" value="b" name="question3">b) Madrid <br>
  <input type="radio" value="c" name="question3">c) Milan<br>
  <input type="radio" value="d" name="question3">d) Rome<br>
</div>

<div class="qheader">
  <p> 4) Which ocean is the largest?</p>
</div>
<div class="questsel">
  <input type="radio" value="a" name="question4">a) Arctic<br>
  <input type="radio" value="b" name="question4">b) Pacific<br>
  <input type="radio" value="c" name="question4">c) Indian<br>
  <input type="radio" value="d" name="question4">d) Atlantic<br>
</div>

<div class="qheader">
  <p> 5) Which of these rivers is largest in North America?</p>
</div>
<div class="questsel">
  <input type="radio" value="a" name="question5">a) Missouri River<br>
  <input type="radio" value="b" name="question5">b) Nile River <br>
  <input type="radio" value="c" name="question5">c) Amazon River<br>
  <input type="radio" value="d" name="question5">d) Yenisei River<br>
</div>

<p>
  <input type="button" id="init" value="Submit" />
</p>

<p id="results"></p>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42430270

复制

相似问题

问带有jquery问题的多个单选按钮调用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有jquery问题的多个单选按钮调用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问带有jquery问题的多个单选按钮调用
EN