如何检查单选按钮是否使用javascript选择

Question

您好，我是网络开发新手。我在html5中创建了一个简单的测试问题，其中用户只选择一个答案（使用无线电）。这在HTML和JavaScript中完成。没有后端。我想确定在转移到下一个问题之前已经选择了一个单选按钮。如果单选按钮没有被选中，它会显示一个警告，告诉用户在前进之前必须选择一个答案。

下面是我的代码：

<section> 
    <p class="questions">Given points (X1, Y1) and (X2, Y2) select the formula to find the equation of the given line.</p> 
    <div > 
    <form class="answers"> 
    <input type="radio" name="radio" value="correct"> 
    <math xmlns = "http://www.w3.org/1998/Math/MathML"> 
     <mrow> 
     <mi> y</mi> 
     <mo>=</mo> 
     <mi>m</mi> 
     <mo>&InvisibleTimes;</mo> 
     <mi>x</mi> 
     <mo>+</mo> 
     <mi>b</mi> 
     </mrow> 
    </math> 

    <!-- 2nc choice --> 
    <input type="radio" name="radio" value="incorrect" > 
     <math xmlns = "http://www.w3.org/1998/Math/MathML"> 
      <mrow> 
      <mrow> 
       <mo>(</mo> 
       <mi>x</mi> 
       <mo>-</mo> 
       <mi>h</mi> 
       <msup> 
       <mo>)</mo> 
       <mn>2</mn> 
      </msup> 
      </mrow> 
      <mo>+</mo> 
      <mrow> 
       <mo>(</mo> 
       <mi>y</mi> 
       <mo>-</mo> 
       <mi>k</mi> 
       <msup> 
       <mo>)</mo> 
       <mn>2</mn> 
       </msup> 
      </mrow> 
      <mo> = </mo> 
      <mrow> 
       <msup> 
       <mi> r</mi> 
       <mn>2</mn> 
       </msup> 
      </mrow> 
     </mrow> 
     </math> <br> 

     <!-- 3rd choice --> 
    <input type="radio" name="radio" value="incorrect"> 
     <math xmlns = "http://www.w3.org/1998/Math/MathML"> 
     <mrow> 
     <mrow> 
      <mi>y</mi> 
      <mo>-</mo> 
      <msub> 
      <mi>y</mi> 
      <mn>1</mn> 
      </msub> 
     </mrow> 
     <mo> = </mo> 
     <mrow> 
      <mi>m</mi> 
      <mo>&InvisibleTimes;</mo> 
      <mo>(</mo> 
      <mi>x</mi> 
      <mo>-</mo> 
      <msub> 
      <mi>x</mi> 
      <mn>1</mn> 
      </msub> 
      <mo>)</mo> 
     </mrow> 

     </mrow> 
     </math> 

     <!--4th Choice --> 
    <input type="radio" name="radio" value="incorrect"> 
     <math xmlns = "http://www.w3.org/1998/Math/MathML"> 
     <mrow> 
      <mrow> 
      <mi>y</mi> 
      <mo>-</mo> 
      <msub><mi>y</mi><mn>2</mn></msub> 
     </mrow> 
     <mo> = </mo> 
     <mrow> 
      <mfrac> 
      <mrow> 
      <msub><mi>y</mi><mn> 2</mn></msub> 
      <mo> - </mo><msub><mi> y</mi><mn> 1</mn></msub> 
      </mrow> 
      <mrow> 
      <msub><mi>x</mi><mn> 2</mn></msub> 
      <mo> - </mo><msub><mi> x</mi><mn> 1</mn></msub> 
      </mrow> 
      </mfrac> 
     </mrow> 
     <mrow> 
      <!-- <mo>&InvisibleTimes;</mo> --> 
      <mo>(</mo> 
      <mi> x </mi> 
      <mo> - </mo> 
      <msub><mi> x</mi><mn>2</mn></msub> 
      <mo>).</mo> 
     </mrow> 

     </mrow> 
     </math> 

    <br> 
     <!-- submit button --> 
    <input type="submit" value="Submit & Next Question" onclick="getAnswer1(this.form)"> 
    <!-- clears the radio --> 
    <input type="submit" value="Cancel & Clear Selection" onclick=""> 
    </form> 
</div> 
</section> 

<script type="text/javascript" src="script.js"></script> 

我知道我的JavaScript代码是错误.. 的Javascript：

/**Trouble making sure user selects an input doesn't matter if its wrong or right. An alert should displayed if user attempts to go to next question. Must select an option. **/ 
//global array stores answers 
var results = []; 
function getAnswer1(form) { 
    var radios = form.elements['radio']; 
    for(var i = 0; i < radios.length; i++) { 
    if(radios[i].checked) { 
     // 
    } 
    } 
} 

Answer 1

var radios = document.getElementsByTagName('input'); 
var value; 
for (var i = 0; i < radios.length; i++) { 
    if (radios[i].type === 'radio' && radios[i].checked) { 
     // get value, set checked flag or do whatever you need to 
     value = radios[i].value;  
    } 
} 

Answer 2

您可以使用document.querySelector找到检查并获得它的价值。

function getAnswer1(form) { 
    var checked = form.querySelector("input[type=radio]:checked"); 
    var value; 
    if (!checked) { 
     alert("You need to select one of the options"); 
     return; 
    } else { 
     value = checked.value; 
    } 
    results.push(value); 
} 

另外，为了防止形式从提交当你点击submit按钮，更改

onclick="getAnswer1(this.form)" 

到：

onclick="getAnswer1(this.form; return false;"