addEventListener：仅单击一堆元素中的一个元素

Question

我是初学者，在 JS 中遇到一些可能很容易解决的问题。

我做了一个基于 NetNinja Udemy 课程的测验，我希望在用户点击任何答案选项时启用提交按钮，而不是之前，这样 he/she 就无法发送一个完全空洞的测验。

测验有 4 个问题，每个问题有 2 个选项，我是这样找到的...

const input_a = document.getElementById("q1a");
const input_b = document.getElementById("q1b");


button.disabled = true;




input_a.addEventListener('click', () => {
    button.disabled = false;

});

input_b.addEventListener('click', () => {
    button.disabled = false;

});

...当用户点击第一个问题的两个选项中的任何一个时启用按钮 (ids: q1a & q1b) 按照这个逻辑，还有 q2a, q2b, q3a, q3b, q4a 和 q4b..

由于有一种方法可以将所有答案包含在一个 JS 元素中，我应该在事件函数中说“当您单击这 8 个选项中的任何一个时，启用按钮”，我应该怎么做？因为我尝试的所有方法只有在我单击所有按钮时才能使该功能起作用，这在测验中显然是不可能的。

谢谢！ :)

Answer 1

在下面的解决方案中，当单击任何单选按钮时，将激活提交按钮。

let result = [false, false, false, false];
let submitButton = document.getElementById('submitButton');

/* Returns true if all tests have been completed. */
function isValid(){
  for(let i = 0 ; i < result.length ; ++i)
    if(result[i] != true)
      return false;
  
  return true;
}

/* If all tests are completed, the submit button is activated. */
function send(){
  result[this.value] = true;
  
  if(isValid()){
    submitButton.disabled = false;
    console.log("The form can be submitted!");
  }
}

/* The send() method is called when the change event of <input> elements whose type is "radio" is fired. */
document.querySelectorAll('input[type="radio"]').forEach((element) => {
    element.addEventListener("change", send);
});

<form action="#">
  <input type="radio" id="html" name="test1" value="0">
  <label for="html">HTML</label><br>
  <input type="radio" id="css" name="test1" value="0">
  <label for="css">CSS</label><br><br>

  <input type="radio" id="js" name="test2" value="1">
  <label for="html">JavaScript</label><br>
  <input type="radio" id="c#" name="test2" value="1">
  <label for="css">C#</label><br><br>

  <input type="radio" id="c" name="test3" value="2">
  <label for="html">C</label><br>
  <input type="radio" id="c++" name="test3" value="2">
  <label for="css">C++</label><br><br>

  <input type="radio" id="python" name="test4" value="3">
  <label for="html">Python</label><br>
  <input type="radio" id="ruby" name="test4" value="3">
  <label for="css">Ruby</label><br><br>

  <button id="submitButton" type="submit" disabled>Submit</button>
</form>

addEventListener：仅单击一堆元素中的一个元素

addEventListener: click just one element of a bunch of elements

javascript

click

addeventlistener