javascript - 检查是否在普通 JavaScript 中单击了所有单选按钮

Question

为了练习，我创建了一个 HTML-CSS-JavaScript 小测验。测验本身有效，但是当我尝试编辑一种方法来检查测验的所有单选按钮是否正常工作时(如果没有，向用户提醒消息)，它就坏了。

这是小测验，具有检查单选按钮是否被点击的功能:

let result = 0;

function right() {
  result += 50;
}

function wrong() {
  result -= 50;
}

function obcpq() {
  if (document.querySelector('#quiz:not(:has(:radio:checked))').length) {
    return alert("At least one group is blank");
  } else {
    function showScore() {
      totalScore = result;
      alert(totalScore);
    }
  }
}

<form id="quiz">
  <label>Q1 - X?</label>
  <input type="radio" onclick="right()">Yes
  <input type="radio" onclick="wrong()">No
  <br>
  <label>Q2 - Y?</label>
  <input type="radio" onclick="wrong()">Yes
  <input type="radio" onclick="right()">No
  <br>
  <input type="button" onclick="obcpq()" />
  <!-- One Button Chcked Per Question -->
</form>

我在阅读此 QA session 中的代码后尝试了此代码.我还找到了this session它处理 jQuery，但我不在此 HTML 页面上运行 jQuery。

为什么条件不适用于我的 vanilla JavaScript 版本？

Answer 1

查看您的 HTML 代码，有一个比例可用于解决您的问题:您希望选中的输入数量与描述框的标签数量相同。当数字不匹配时，表明并非所有问题都得到了回答:

let result = 0;

function right() {
  result += 50;
}

function wrong() {
  result -= 50;
}

function obcpq() {
  const labelCount = document.querySelectorAll('#quiz label').length;
  const checkedInputsCount = document.querySelectorAll("#quiz :checked").length;
  if (labelCount !== checkedInputsCount) {
    return alert("At least one group is blank");
  } else {
    function showScore() {
      totalScore = result;
      alert(totalScore);
    }
  }
}

<form id="quiz">
  <label>Q1 - X?</label>
  <input type="radio" onclick="right()">Yes
  <input type="radio" onclick="wrong()">No
  <br>
  <label>Q2 - Y?</label>
  <input type="radio" onclick="wrong()">Yes
  <input type="radio" onclick="right()">No
  <br>
  <input type="button" onclick="obcpq()" />
  <!-- One Button Chcked Per Question -->
</form>