您好，我是网络开发新手。我在 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>⁢</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>⁢</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>⁢</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) {
//
}
}
}
最佳答案
您可以使用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;"
关于javascript - 如何使用 javascript 检查单选按钮是否被选中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35760426/