检查是否选中了单选按钮答案

【问题标题】：Checked to see if radio buttons are checked检查是否选中了单选按钮
【发布时间】：2016-09-26 00:14:58
【问题描述】：

我正在为我正在构建的 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")};
});

无论是选中、未选中还是部分选中所有按钮，它始终返回 true。我知道我在这里一定做错了什么。另外我不想给元素本身一个选中的属性，因为我不希望它默认读取为选中，以防有人跳过问题，它会给出倾斜的结果（我认为）

【问题讨论】：

有一个错字。 ==true 应该在 if 条件中的 jQuery 选择器之外。它应该是 $('input[name=answer]:checked') == true 不确定这是帖子中的错字还是实际代码中的错字

标签： jquery button radio checked

【解决方案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>

【讨论】：

非常感谢，一个问题......这个运算符“^=”是什么我以前从未见过。 ($('input[name^="answer"]:checked')
这是 jQuery 的 "starts-with" selector，它将匹配任何具有以“answer”开头的 name 属性的元素。
非常感谢，我想知道这对于代码是否绝对必要。如果需要，我可以使用不同的选择器