javascript - querySelectorAll 查找哪个按钮被选中 JavaScript

Question

我刚刚学习 JavaScript，并且在使用 radio 按钮和 JavaScript 时遇到问题。我有以下代码:

var cbLoop = document.querySelectorAll('[name="question1"]');
    for(var x in cbLoop){
        if(x.checked){ <-- I assume this is the problem?
            answers[0] = x.value;
        }
    }

question1 指的是 5 个radio 按钮。我想找到当用户单击“提交”按钮时选择了哪个按钮。我想，我无法使用我拥有的 for 循环调用 .checked 。

有人可以帮忙吗？

Answer 1

使用 for ... in 循环，您将迭代键而不是实际项目。 您可以像下面这样使用 Aarry#forEach:

document.getElementById('btnSubmit').addEventListener('click', function(){
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answers =[];
  cbLoop.forEach(function(radio){
    if(radio.checked){ 
        answers[0] = radio.value;
    }
  });
  console.log(answers);
});

<input type="radio" name="question1">1</input>
<input type="radio" name="question1">2</input>
<input type="radio" name="question1" checked>3</input>
<input type="radio" name="question1">4</input>
<input type="radio" name="question1">5</input>
<br>
<input type="submit" id="btnSubmit" value="submit" />

OR:使用for循环

document.getElementById('btnSubmit').addEventListener('click', function(){
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answers = [];
  for(var i = 0; i < cbLoop.length; i++){
    if(cbLoop[i].checked){ 
        answers[0] = cbLoop[i].value;
    }
  }
  console.log(answers);
});

<input type="radio" name="question1">1</input>
<input type="radio" name="question1">2</input>
<input type="radio" name="question1" checked>3</input>
<input type="radio" name="question1">4</input>
<input type="radio" name="question1">5</input>
<br>
<input type="submit" id="btnSubmit" value="submit" />