javascript - 如何验证RadioButton选项？

大家好，我正在创建一个 mcq 类型的表单，用户可以在其中选择任何答案并在提交后提交，它会告诉您是否选择了正确的答案。如果您选择了正确的答案，那么它会提示您确定答案是正确的，如果您给出了错误的答案，它会提示您这是错误的答案以及实际答案。我已经这样做了，但我的问题是，当我选择正确的值时，它会提示正确的答案，如果我选择错误的选项，它会给我答案是错误的，但前面的“正确答案”行是出现新提示后不删除。我该怎么做？

$(document).ready(function() {
  $("#sid").click(function() {

    if (!$("input[@name=q1]:checked").val()) {
      alert("You're not done yet!");
    } else {
      var cat1name = "1";
      var cat2name = "None";



      var cat1 = ($("input[@name=q1]:checked").val() != "a");
      var cat2 = (!cat1);
      var categories = [];

      if (cat1) {
        categories.push(cat1name)
      };


      if (cat2) {
        categories.push(cat2name)
      };


      var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
      $("#categorylist").text(catStr);
      $("#categorylist").show("slow");

      if (cat1) {
        $("#category1").show("slow");
      };

      if (cat2) {
        $("#category2").show("slow");
      };

      {
        $("#closing").show("slow");
      };
    }
  });
});

$(document).ready(function() {
  $("#results1").click(function() {

    if (!$("input[@name=q2]:checked").val()) {
      alert("You're not done yet!");
    } else {
      var cat3name = "2";
      var cat4name = "None";



      var cat3 = ($("input[@name=q2]:checked").val() != "b");
      var cat4 = (!cat3);
      var categories = [];

      if (cat3) {
        categories.push(cat3name)
      };


      if (cat4) {
        categories.push(cat4name)
      };

      var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
      $("#categorylist").text(catStr);
      $("#categorylist").show("slow");

      if (cat3) {
        $("#category3").show("slow");
      };

      if (cat4) {
        $("#category4").show("slow");
      };

      {
        $("#closing").show("slow");
      };
    }
  });
});

.answers li {
  list-style: upper-alpha;
}

label {
  margin-left: 0.5em;
  cursor: pointer;
}

#results {
  background: #dddada;
  color: 000000;
  padding: 3px;
  text-align: center;
  width: 200px;
  cursor: pointer;
  border: 1px solid gray;
}

#results:hover {
  background: #3d91b8;
  color: #ffffff;
  padding: 3px;
  text-align: center;
  width: 200px;
  cursor: pointer;
  border: 1px solid gray;
}

#results1 {
  background: #dddada;
  color: 000000;
  padding: 3px;
  text-align: center;
  width: 200px;
  cursor: pointer;
  border: 1px solid gray;
}

#results1:hover {
  background: #3d91b8;
  color: #ffffff;
  padding: 3px;
  text-align: center;
  width: 200px;
  cursor: pointer;
  border: 1px solid gray;
}

#categorylist {
  margin-top: 6px;
  display: none;
}

#category1,
#category2,
#category3,
#category4,
#category5,
#category6,
#category7,
#category8,
#category9,
#category10,
#category11 {
  display: none;
}

#closing {
  display: none;
  font-style: italic;
}

#sid {
  font-style: italic;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="testmcq.css">
  <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript" src="linkmcq.js"></script>
  <script type="text/javascript" src="bootstrap.min.js"></script>
</head>

<body>

  <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>


  <!--<div id="results">Show me the answers!</div>-->
  <button type="button" class="btn btn-link" id="sid">Link Button</button>

  <div id="category1">
    <p><strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
  </div>

  <div id="category2">
    <p>Correct Answer!</p>
  </div>
  &nbsp
  <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>



  <div id="results1">
    Show me the answers!
  </div>

  <div id="category3">
    <p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
  </div>

  <!--<div id="category2">
<p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>-->

  <div id="category4">
    <p>Correct Answer!</p>
  </div>

</body>

</html>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>

最佳答案

我在您的代码中发现了许多错误。

如果您需要检查可能使用的单选按钮值:

$("input:radio[name='q1']:checked").val();

我已经使用 jQuery 1.11.0 制定了一个可能的解决方案，因此您可以从此开始。

Updated:

默认情况下，您需要在单击按钮时隐藏消息。

$("#category1, #category2").hide();

$(function() {
  $("#sid").on("click", function() {
    $("#category1, #category2").hide();
    var q1 = $("input:radio[name='q1']:checked");
    if (q1.val() === undefined) {
      alert("You're not done yet!");
    } else {
      var cat1name = "1";
      var cat2name = "None";

      var cat1 = (q1.val() != "a");
      var cat2 = (!cat1);
      var categories = [];

      if (cat1) {
        categories.push(cat1name)
      }

      if (cat2) {
        categories.push(cat2name)
      }
      console.log(categories);


      var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
      $("#categorylist").text(catStr);
      $("#categorylist").show("slow");

      if (cat1) {
        $("#category1").show("slow");
      }

      if (cat2) {
        $("#category2").show("slow");
      }

      $("#closing").show("slow");
    }
  });

  $("#results1").on("click", function() {
    $("#category3, #category4").hide();
    var q2 = $("input:radio[name='q2']:checked");
    if (q2.val() === undefined) {
      alert("You're not done yet!");
    } else {
      var cat3name = "2";
      var cat4name = "None";

      var cat3 = (q2.val() != "b");
      var cat4 = (!cat3);
      var categories = [];

      if (cat3) {
        categories.push(cat3name)
      };

      if (cat4) {
        categories.push(cat4name)
      };

      var catStr = 'You answered the following questions incorrectly: ' + categories.join(', ') + '';
      $("#categorylist").text(catStr);
      $("#categorylist").show("slow");

      if (cat3) {
        $("#category3").show("slow");
      }

      if (cat4) {
        $("#category4").show("slow");
      }
      $("#closing").show("slow");
    }
  });
});

.answers li {
  list-style: upper-alpha;
}
label {
  cursor: pointer;
  margin-left: 0.5em;
}
#results {
  background: #dddada;
  border: 1px solid gray;
  color: #000000;
  cursor: pointer;
  padding: 3px;
  text-align: center;
  width: 200px;
}
#results:hover {
  background: #3d91b8;
  border: 1px solid gray;
  color: #ffffff;
  cursor: pointer;
  padding: 3px;
  text-align: center;
  width: 200px;
}
#results1 {
  background: #dddada;
  border: 1px solid gray;
  color: #000000;
  cursor: pointer;
  padding: 3px;
  text-align: center;
  width: 200px;
}
#results1:hover {
  background: #3d91b8;
  border: 1px solid gray;
  color: #ffffff;
  cursor: pointer;
  padding: 3px;
  text-align: center;
  width: 200px;
}
#categorylist {
  display: none;
  margin-top: 6px;
}
#category1,
#category2,
#category3,
#category4,
#category5,
#category6,
#category7,
#category8,
#category9,
#category10,
#category11 {
  display: none;
}
#closing {
  display: none;
  font-style: italic;
}
#sid {
  font-style: italic;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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>
<!--<div id="results">Show me the answers!</div>-->
<button type="button" class="btn btn-link" id="sid">Link Button</button>
<div id="category1">
  <p><strong>Question 1:</strong> The correct answer is the <strong>Answer 1</strong>.</p>
</div>
<div id="category2">
  <p>Correct Answer!</p>
</div>&nbsp
<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>
<div id="results1">Show me the answers!</div>
<div id="category3">
  <p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>
<!--<div id="category2">
<p><strong>Question 2:</strong> The correct answer is the <strong>Answer 2</strong>.</p>
</div>-->
<div id="category4">
  <p>Correct Answer!</p>
</div>

Demo

关于javascript - 如何验证RadioButton选项？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32614904/

javascript - 如何验证RadioButton选项？

上一篇：javascript - 如何使用 Jint 从 JavaScript 函数调用中获取正确的 C# 字符串数组

下一篇：javascript - 使用 Ionic 和 NgMap 模块的黑屏