检查单选按钮是否被选中

Question

我正在为我正在构建的 RPG 网站制作多项选择问卷。

我需要脚本来做两件事。

检查是否已回答所有 14 个问题，如果已回答，请显示提交按钮！
查看哪些答案已被检查，稍后将分数添加到各种变量中。

在这两种情况下，我都需要至少与单选按钮有联系的脚本，但是唉，我的新手代码技能还不够。

这里是HTML

<div class="question">
<form>
<p class="bold">1. At a party, your with your buddies and a drunken fool does something to seriously offend you. Your friends look to see how you'll respond.  What do you do? </p>
<ul>
<li class="answer mnkA"><input type="radio" name="answer">A. Laugh it off, hes drunk, its really not worth getting upset over</li>

<li  class="answer cleA"><input type="radio" name="answer">B. Just because your drunk doesn't excuse you from responsibilities, that person should apologize</li>

<li class="answer berA"><input type="radio" name="answer">C. I'm not gonna let him make a fool of me in front of my friends, I have beat whole sale ass for less then that before!</li>

<li class="answer mgeA"><input type="radio" name="answer">D. I'll get my revenge, I caught him in the bathroom earlier doing something embarrassing. Might just let that slip.</li>

<li class="answer thfA"><input type="radio" name="answer">E. I am gonna wait for this fool to turn his back, then he'll get whats coming to him.</li>

<li class="answer defA"><input type="radio" name="answer">F. I'll get rough if he keeps pushing it. My main concern is my friends that I'm here with tonight.</li>

<li class="answer druA"><input type="radio" name="answer">G. I'm gonna keep my eyes open but not snap judge. Stay open, if he wants to throw down ill throw down, if he wants to talk it out , ill listen.</li>

<li class="answer rngA"><input type="radio" name="answer">H. I'm gonna leave, sometimes avoidance is the best answer</li>
</ul>
</form>
</div>

这是我昨晚在 Stack Overflow 上搜索了一段时间后尝试的 jQuery。

（我创建了一个小的测试按钮，我没有包含它，用一个 onclick 来调用这个函数）

$('#testbutton').on('click', function(){
    if ($('input[name=answer]:checked' == true)) {alert("its checked")} else {alert("not checked")};
});

无论所有按钮是否选中、未选中或部分选中，它始终 returns 为真。我知道我一定是在这里做错了什么。我也不想给元素本身一个 checked 属性，因为我不希望它默认读取为 checked 以防万一有人跳过问题，它会给出不正确的结果（我认为）

Answer 1

默认情况下，:checked 选择器应该匹配任何被选中的元素，因此您可能只是检查有多少元素被选中：

// Check if any elements are checked
if ($('input[name^="answer"]:checked').length > 0){
    // At least one question is answered
} 
else {
    // No questions are answered
}

如果您想查看是否所有个人组都被选中，只需将组总数与选中的组数（或 question 个元素的数量）进行比较即可。

// Check if all of your questions are answered
if ($('input[name^="answer"]:checked').length == $('.question').length){
    // Everything is checked
} 
else {
    // At least one of the questions isn't answered
}

例子

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Questions</title>
</head>

<body>
  <button id='test-button'>Any Questions Answered?</button>
  <button id='test-all-button'>All Questions Answered?</button>
  <hr />

  <div class="question">
    <form>
      <p class="bold">1. At a party, your with your buddies and a drunken fool does something to seriously offend you. Your friends look to see how you'll respond. What do you do?</p>
      <ul>
        <li class="answer mnkA">
          <input type="radio" name="answer">A. Laugh it off, hes drunk, its really not worth getting upset over</li>

        <li class="answer cleA">
          <input type="radio" name="answer">B. Just because your drunk doesn't excuse you from responsibilities, that person should apologize</li>

        <li class="answer berA">
          <input type="radio" name="answer">C. I'm not gonna let him make a fool of me in front of my friends, I have beat whole sale ass for less then that before!</li>

        <li class="answer mgeA">
          <input type="radio" name="answer">D. I'll get my revenge, I caught him in the bathroom earlier doing something embarrassing. Might just let that slip.</li>

        <li class="answer thfA">
          <input type="radio" name="answer">E. I am gonna wait for this fool to turn his back, then he'll get whats coming to him.</li>

        <li class="answer defA">
          <input type="radio" name="answer">F. I'll get rough if he keeps pushing it. My main concern is my friends that I'm here with tonight.</li>

        <li class="answer druA">
          <input type="radio" name="answer">G. I'm gonna keep my eyes open but not snap judge. Stay open, if he wants to throw down ill throw down, if he wants to talk it out , ill listen.</li>

        <li class="answer rngA">
          <input type="radio" name="answer">H. I'm gonna leave, sometimes avoidance is the best answer</li>
      </ul>
    </form>
  </div>
  <div class="question">
    <form>
      <p class="bold">2. At a party, your with your buddies and a drunken fool does something to seriously offend you. Your friends look to see how you'll respond. What do you do?</p>
      <ul>
        <li class="answer mnkA">
          <input type="radio" name="answer">A. Laugh it off, hes drunk, its really not worth getting upset over</li>

        <li class="answer cleA">
          <input type="radio" name="answer">B. Just because your drunk doesn't excuse you from responsibilities, that person should apologize</li>

        <li class="answer berA">
          <input type="radio" name="answer">C. I'm not gonna let him make a fool of me in front of my friends, I have beat whole sale ass for less then that before!</li>

        <li class="answer mgeA">
          <input type="radio" name="answer">D. I'll get my revenge, I caught him in the bathroom earlier doing something embarrassing. Might just let that slip.</li>

        <li class="answer thfA">
          <input type="radio" name="answer">E. I am gonna wait for this fool to turn his back, then he'll get whats coming to him.</li>

        <li class="answer defA">
          <input type="radio" name="answer">F. I'll get rough if he keeps pushing it. My main concern is my friends that I'm here with tonight.</li>

        <li class="answer druA">
          <input type="radio" name="answer">G. I'm gonna keep my eyes open but not snap judge. Stay open, if he wants to throw down ill throw down, if he wants to talk it out , ill listen.</li>

        <li class="answer rngA">
          <input type="radio" name="answer">H. I'm gonna leave, sometimes avoidance is the best answer</li>
      </ul>
    </form>
  </div>

  <script>
    $(function() {
      $('#test-button').on('click', function() {
        // Check if all of your questions are answered
        if ($('input[name^="answer"]:checked').length > 0) {
          console.log('At least one question is answered.');
        } else {
          // At least one of the questions isn't answered
          console.log('No questions have been answered');
        }
      });

      $('#test-all-button').on('click', function() {
        // Check if all of your questions are answered
        if ($('input[name^="answer"]:checked').length == $('.question').length) {
          console.log('All questions answered');
        } else {
          // At least one of the questions isn't answered
          console.log('At least one question is not answered');
        }
      });
    });
  </script>
</body>

</html>

检查单选按钮是否被选中

Checked to see if radio buttons are checked

jquery

button

radio

checked