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按钮。我想查找用户单击submit按钮时选择了哪个按钮。我想，我不能使用我拥有的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" />

或者：带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" />

Answer 2

您可以使用标准for循环：

function check() {
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answers = [];
  for (var x = 0; x < cbLoop.length; x++) {
    if (cbLoop[x].checked) {
      answers[0] = cbLoop[x].value;
    }
  }
  console.log(answers);
}

<input type="radio" name="question1" value="Q1" checked>1</input>
<input type="radio" name="question1" value="Q2">2</input>
<input type="radio" name="question1" value="Q3">3</input>
<input type="radio" name="question1" value="Q4">4</input>
<br /><br />
<button type="button" onclick="check();">Check</button>

但是，使用

单选按钮选择的值永远不会超过一个，那么为什么要使用数组作为答案呢？您可以使用一个简单的变量：

function check() {
  var cbLoop = document.querySelectorAll('[name="question1"]');
  var answer;
  for (var x = 0; x < cbLoop.length; x++) {
    if (cbLoop[x].checked) {
      answer = cbLoop[x].value;
    }
  }
  console.log(answer);
}

<input type="radio" name="question1" value="Q1" checked>1</input>
<input type="radio" name="question1" value="Q2">2</input>
<input type="radio" name="question1" value="Q3">3</input>
<input type="radio" name="question1" value="Q4">4</input>
<br /><br />
<button type="button" onclick="check();">Check</button>