检查是否在vanilla 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>

Answer 2

尝试在单独的div中添加每个问题，然后循环遍历它们并检查该组是否至少有一个选中的选项radio，然后使用标志存储循环结果，最后显示正确的信息，如：

＆＃13;

＆＃13;

let result = 0;

function right() {
  result += 50;
}

function wrong() {
  result -= 50;
}

function obcpq() {
  var groups = document.querySelectorAll('#quiz div');
  var all_checked = true;
  
  for (i = 0; i < groups.length; i++) {
    if (groups[i].querySelectorAll(':checked').length==0) {
      all_checked = false;
    }
  }
  
  if (!all_checked) {
    console.log('Check please all the radios');
  } else {
    console.log('showScore');
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;