Question

您好我是Web开发的新手。我在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);
}

另外，要防止在您点击submit按钮时提交表单，请更改

onclick="getAnswer1(this.form)"

为：

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

Answer 2

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;       
    }
}

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

2 个答案: