Javascript 在javascript中创建一个多选选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34084048/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating a multiple choice option in javascript
提问by susanta kumar muduli
I have created an HTML multiple choice question. I am facing a problem how to validate it. Below is the html code:
我创建了一个 HTML 多项选择题。我面临如何验证它的问题。下面是html代码：
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button>Submit Answer</button> If the user clicks the submit button without selecting any option, an alert box should be say "please select choice answer". If the user clicks the submit button selecting the "Scripting" option, an alert box should be say "Answer is correct !"If the user clicks the submit button selecting an option different from "Scripting" an alert box should be say "Answer is wrong". Please help me code this by using JavaScript.
如果用户在没有选择任何选项的情况下单击提交按钮，则应显示警告框"please select choice answer"。如果用户单击提交按钮选择“脚本”选项，则应显示警告框"Answer is correct !"如果用户单击提交按钮选择与“脚本”不同的选项，则应显示警告框"Answer is wrong"。请帮助我使用 JavaScript 编写代码。
回答by J. Lee
Here you go! I have also attached some comments.
干得好！我还附上了一些评论。
回答by Ray
You have to use onclick attribute and more js
您必须使用 onclick 属性和更多 js
- attach event hander to your button
- get radio elements value
- compare
- 将事件处理程序附加到您的按钮
- 获取无线电元素值
- 相比
var submitAnswer = function() {
var radios = document.getElementsByName('choice');
var val= "";
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
if (val == "" ) {
alert('please select choice answer');
} else if ( val == "Scripting" ) {
alert('Answer is correct !');
} else {
alert('Answer is wrong');
}
};<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>回答by Giovanni G. PY
var submitAnswer = function() {
var radios = document.getElementsByName('choice');
var val= "";
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
if (val == "" ) {
alert('please select choice answer');
} else if ( val == "Scripting" ) {
alert('Answer is correct !');
} else {
alert('Answer is wrong');
}
};<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer()">Submit Answer</button>Some changes
一些变化
I made some changes to the code above to make it more 'abstract'
我对上面的代码进行了一些更改，使其更加“抽象”
<h1>JavaScript is ______ Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
</form>
<button onclick="submitAnswer(d1.choice.value, 'Scripting')">Submit Answer</button>
<script>
var submitAnswer = function(valore, rightanswer) {
if (valore == rightanswer) {
alert("OK");
}
};
</script>Another, more complex example
另一个更复杂的例子
<div style="background-color:lightblue">
<h1>JavaScript is a <span id='a1'>______</span> Language.</h1><br>
<form id="d1">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Scripting', 'd1','a1')">
</form>
</div>
<div style="background-color:lightblue">
<h1>Python is a <span id='a2'>______</span> Language.</h1><br>
<form id="d2">
<input type="radio" name="choice" value="Scripting"> Scripting
<input type="radio" name="choice" value="Wonderful"> Wonderful
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<br>
<input type="submit" value="submit" onclick="validate(choice.value, 'Wonderful', 'd2', 'a2')">
</form>
</div>
<script>
var validate = function(valore, rightanswer, form, span) {
var formname = document.getElementById(form)
var spanname = document.getElementById(span)
spanname.innerHTML = rightanswer;
if (valore == rightanswer) {
formname.innerHTML ="<div style='background-color:lightgreen'><h1>GREAT! YOU'RE RIGHT: The answer, in fact, was: " + rightanswer + "</h1></div>";
}
else {
formname.innerHTML ="<div style='background-color:pink'><h1>Sorry, you where wrong: The answer was: " + rightanswer + "</h1></div>";
}
};
</script>回答by Jefree Sujit
Use the requiredkeyword. This prompts the user to choose a value, when the submit button is pressed without choosing any option. And always prefer to use
使用required关键字。当按下提交按钮而不选择任何选项时，这会提示用户选择一个值。并且总是喜欢使用
<input type="submit" value="submit">over <button>Submit Answer</button>
<input type="submit" value="submit">超过 <button>Submit Answer</button>
while handling forms. Use the onclick()event handler to call your Javascript code.
在处理表格时。使用onclick()事件处理程序调用您的 Javascript 代码。
<h1>JavaScript is ______ Language.</h1><br>
<form >
<input type="radio" name="choice" value="Scripting" required> Scripting
<input type="radio" name="choice" value="Programming"> Programming
<input type="radio" name="choice" value="Application"> Application
<input type="radio" name="choice" value="None of These"> None of These
<input type="submit" value="submit" onclick="validate()">
</form>
And the javascript part is as follows.
javascript部分如下。
<script type="text/javascript">
function validate() {
var a= document.getElementByName("choice");
for (var i = 0, i < a.length; i++) {
if (a[i].checked) {
if( a[i].value == "scripting" )
alert("your answer is correct");
else
alert("your answer is not correct");
break;
} } }
</script>
回答by susanta kumar muduli
Here condition is showing in alert pop up box. but I want to show it in a html tag. But after clicking submit button, innerHTML content showing a millisecond and then automatic remove the content. How selection will stay in innerHTML
这里的情况显示在警报弹出框中。但我想在 html 标签中显示它。但是点击提交按钮后，innerHTML 内容显示一毫秒然后自动删除该内容。选择将如何留在innerHTML中
document.getElementById("answer").innerHTML;
var submitAnswer = function() {
var radios = document.getElementsByName('choice');
var val= "";
for (var i = 0, length = radios.length; i < length; i++) {
if (radios[i].checked) {
val = radios[i].value;
break;
}
}
if (val == "" ) {
document.getElementById("answer").innerHTML = "please select choice answer";
} else if ( val == "Scripting" ) {
document.getElementById("answer").innerHTML = "Answer is correct !"
} else {
document.getElementById("answer").innerHTML = "Answer is wrong"
}
};
回答by Bharat Thapa
You can add a function and event onClick so that whenever someone clicks on option submit button will appear.
您可以添加一个函数和事件 onClick 以便每当有人点击选项提交按钮时就会出现。
