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按钮时选择了哪个按钮。我猜，我不能使用我拥有的.checked循环来调用for。

有人可以帮忙吗？

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" />

Answer 2

您可以使用标准for循环：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

但是，使用单选按钮永远不会有多个值，所以为什么要使用数组作为答案呢？您可以使用一个简单的变量：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

querySelectorAll查找选择了哪个按钮JavaScript

2 个答案: