javascript - 如何使用 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

您可以使用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);
}

此外，为了防止在单击提交按钮时提交表单，请更改

onclick="getAnswer1(this.form)"

至:

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