如何将选定的单选按钮存储在数组中？

Question

I am making an online examination where questions are coming from the database through php and getting displayed through ajax.I want to get the selected radio button and store it in an array which is not happening because i am not getting the value.Everything else is working fine only i cant push the radio value in the array. i can supply the php code if you need to look through the problem please help

HTML:

<button type="button" class="btn btn-info btn-md" id="mark" onclick="loadNextQues(1)">Mark for Review & Next</button>
<button type="button" class="btn btn-info btn-md">Clear Response</button>
<button type="submit" class="btn btn-info btn-md" id="save" style="position:absolute;right:20px;bottom:35px" onclick="loadNextQues(0)">Save and Next</button>
<form action="check.php">
  <button type='submit' class="btn btn-info btn-md" id="water" style="visibility:hidden;position:absolute;right:20px;bottom:35px">submit</button>

Javascript:

 function loadNextQues(flag) {
  quesno++;
  if (flag == 1) {
    //add css to the button for review
  } else {
    //add css for the button as answered
  }
  url = "http://localhost/assignments/load-questions.php?qno=" + quesno;
  $.get(url, function(data, status) {
    response = JSON.parse(data);
    console.log(response);
    var quest = "<p>" + response.qno + " " + response.question + "</p>";
    quest += "<form>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opA +
      "'>A." +
      response.opA +
      "<br>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opB +
      "'>B." +
      response.opB +
      "<br>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opC +
      "'>C." +
      response.opC +
      "<br>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opD +
      "'>D." +
      response.opD +
      "<br>";
    quest += "</form>";
    document.getElementById("questBox").innerHTML = quest;
  });

  if (quesno == 15) {
    document.getElementById("mark").style.visibility = "hidden";
    document.getElementById("save").style.visibility = "hidden";
    document.getElementById("water").style.visibility = "visible";
  }
  var myArr = [];
  var Selected = document.querySelectorAll('[name="op"]:checked');
  if (Selected != null) {
    arr.push(Selected.value);
  }
  console.log(arr);
}

Answer 1

You could use ES6 syntax and the .map() array method. Something like...

var arr = Selected.map(dom => dom.value);

Answer 2

You need to iterate through the elements to get their values, also arr is not defined.

Edit to get the intended effect...

var arr = new Array();
function loadNextQues(flag) {
  var Selected = document.querySelectorAll('[name="op"]:checked');
  if (Selected != null) {
     Selected.forEach(function(radio) {
        arr.push(radio.value);
     });
  }
  console.log(arr);

  quesno++;
  if (flag == 1) {
    //add css to the button for review
  } else {
    //add css for the button as answered
  }
  url = "http://localhost/assignments/load-questions.php?qno=" + quesno;
  $.get(url, function(data, status) {
    response = JSON.parse(data);
    console.log(response);
    var quest = "<p>" + response.qno + " " + response.question + "</p>";
    quest += "<form>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opA +
      "'>A." +
      response.opA +
      "<br>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opB +
      "'>B." +
      response.opB +
      "<br>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opC +
      "'>C." +
      response.opC +
      "<br>";
    quest +=
      '<input type="radio" name="op" value=\'' +
      response.opD +
      "'>D." +
      response.opD +
      "<br>";
    quest += "</form>";
    document.getElementById("questBox").innerHTML = quest;
  });

  if (quesno == 15) {
    document.getElementById("mark").style.visibility = "hidden";
    document.getElementById("save").style.visibility = "hidden";
    document.getElementById("water").style.visibility = "visible";
  }
  var myArr = [];