Is there a way to loop through an HTML quiz to get text from "laber for" with value "-CodePudding

I have a multiple choice radio button quiz. I want to get all the correct answers and print them. Correct answers are marked value="true" in html. Other answers have different value. How can I loop through to get text of all the correct answers from using javascript or PHP? Example:

<span class='mlw_qmn_question_number'>1. </span>
<span class='mlw_qmn_question '>Roberta _____ from Canada.</span>
<div class='qmn_radio_answers mlwRequiredRadio'>

  <div class='qmn_mc_answer_wrap' id='question21-are'>
    <input type='radio' class='qmn_quiz_radio' name='question21' id='question21_1' value='are' />
    <label for='question21_1'>are</label>
  </div>

  <div class='qmn_mc_answer_wrap' id='question21-is'>
    <input type='radio' class='qmn_quiz_radio' name='question21' id='question21_2' value='true' />
    <label for='question21_2'>is</label>
  </div>

  <div class='qmn_mc_answer_wrap' id='question21-am'>
    <input type='radio' class='qmn_quiz_radio' name='question21' id='question21_3' value='am' />
    <label for='question21_3'>am</label>
  </div>

  <div class='qmn_mc_answer_wrap' id='question21-be'>
    <input type='radio' class='qmn_quiz_radio' name='question21' id='question21_4' value='be' />
    <label for='question21_4'>be</label>
  </div>

  <input type='radio' style='display: none;' name='question21' id='question21_none' checked='checked' value='No Answer Provided' />
</div>

CodePudding user response：

In JavaScript with querySelectorAll, querySelector and Array.prototype.map. First find all the inputs with querySelectorAll. Then use map with querySelector to find the corresponding label for each input and create an array of labels. Then map the labels to its content.

const inputs = document.querySelectorAll('input[value=true]');
const labels = Array.prototype.map.call(inputs, input => document.querySelector(`label[for=${input.id}]`));

console.log(Array.prototype.map.call(labels, label => label.innerHTML));

<span class='mlw_qmn_question_number'>1. </span><span class='mlw_qmn_question '>Roberta _____ from Canada.</span>
<div class='qmn_radio_answers mlwRequiredRadio'>
  <div class='qmn_mc_answer_wrap' id='question21-are'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_1' value='are' /> <label for='question21_1'>are</label></div>
  <div class='qmn_mc_answer_wrap' id='question21-is'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_2' value='true' /> <label for='question21_2'>is</label></div>
  <div class='qmn_mc_answer_wrap' id='question21-am'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_3' value='am' /> <label for='question21_3'>am</label></div>
  <div class='qmn_mc_answer_wrap' id='question21-be'><input type='radio' class='qmn_quiz_radio' name='question21' id='question21_4' value='be' /> <label for='question21_4'>be</label></div><input type='radio' style='display: none;' name='question21' id='question21_none' checked='checked' value='No Answer Provided' />
</div>