如何验证RadioButton选项？

时间：2015-09-16 17:20:59

标签： javascript jquery html

大家好我正在创建一个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>

1 个答案:

答案 0 :(得分：1)

我在你的代码中发现了很多错误。

如果您需要检查可能使用的radiobutton值：

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

我已经使用jQuery 1.11.0创建了一个可能的解决方案，所以你可以从这开始。

  

<强>更新

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

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

＆＃13;
＆＃13; 
$(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");
    }
  });
});
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

Demo

相关问题
最新问题