Javascript 如何使用单选按钮并显示此表单

我正在使用materialize框架，我必须使用java脚本填充此表单。我不知道如何在我的js文件中访问它们

<div class="row col s10 offset-s1" id="questionArea" style="display:none">
      <blockquote class="flow-text"> Select the capital of the country shown below.</blockquote>
     <div class="input-field col s6">
       Question <span id="quesTextSpan"></span><p>
         <input name="qOptions" type="radio" id="optionId0" class="with-gap qOptionClass" />
         <label for="optionId0"></label>
       </p>
       <p>
         <input name="qOptions" type="radio" id="optionId1" class="with-gap qOptionClass" />
         <label for="optionId1"></label>
       </p>
       <p>
         <input  name="qOptions" type="radio" id="optionId2" class="with-gap qOptionClass" />
         <label for="optionId2">d</label>
       </p>
       <p>
         <input  name="qOptions" type="radio" id="optionId3" class="with-gap qOptionClass" />
         <label for="optionId3"></label>
       </p>
     </div>
    </div>

选择下面显示的国家的首都。
问题




d

您可以访问单选按钮的值，如下所示：

var radioVal = document.getElementById('optionId0').checked;

然后可以使用条件和函数对它们执行逻辑

为了快速收集它们，我建议这样做

var radios = document.querySelectorAll('input[type="radio"]');

这将为您提供一个包含每个元素的数组。 然后，根据您希望填充它们的方式，您可以遍历并将值更改为true或false

（示例）

（编辑）

要显示div，请使用：

document.getElementById('questionArea').style.display = ''; 

document.getElementById('questionArea').style.display = 'hidden';

要隐藏div，请使用：

document.getElementById('questionArea').style.display = ''; 

document.getElementById('questionArea').style.display = 'hidden';

---

你能帮我展示一下吗？投否决票的原因？