使用 querySelector 从单选按钮读取 2 个值

Question

您好，我如何使用查询选择器从单选按钮读取两个值并将这些值存储在 javascript 的数组中。下面的代码示例是：

                   <input type="radio" name="one" value="correct" class="firstRow">&nbsp;Option 1 Mark 1: $650
                    <input type="radio" name="two" value="incorrect" class="secondRow">&nbsp;Option 1 Mark 2: Twitter<br>
                    <input type="radio" name="one" value="incorrect" class="firstRow">&nbsp;Option 2 Mark 1:$550
                    <input type="radio" name="two" value="incorrect" class="secondRow">&nbsp;Option 2 Mark 2:Google<br>
                    <input type="radio" name="one" value="incorrect" class="firstRow">&nbsp;Option 3 Mark 1:$650
                    <input type="radio" name="two" value="correct" class="secondRow">&nbsp;Option 3 Mark 2:$650<br>
                  <!--button -->
                    <input type="button" value="Submit & Next Question" onclick="getAnswer3(this.form)" class="firstRow">
                    <input type="button" value="Cancel & Clear Selection" onclick="clearOptions(this.form)">

JavaScript 我的想法：

function getAnswer3(form) {
   var result = [];
   //this only reads one value but i need to read 2 values..
   var checked = form.querySelector("input[type=radio]:checked");

   if(!checked) {
    alert('Please select 2 answers..');
}
  else{
       //reads the values 
    }
   //stores the values in the array..
}

Answer 1

你需要form.querySelectorAll("input[type=radio]:checked");

请记住，返回的querySelectorAll并不是真正的数组，因此没有典型数组所具有的任何特别有趣且简单的辅助方法。

但它确实有长度。

if checked但不会有帮助。你总是会得到回报NodeList。

该列表可能有 length === 0，但它仍然是一个列表（因此仍然通过检查以查看它是否存在）。检查长度是否小于 2。