用javascript创建多选选项
Creating a multiple choice option in javascript
我创建了一个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>
当用户单击提交按钮时,应该会出现一个警报,根据所选内容显示一条消息。
- 如果未选择任何选项,则警报框应显示
"please select choice answer"
- 如果选择了"Scripting"(脚本)选项,则警报框应显示
"Answer is correct !"
- 如果选择了不同于"脚本"的选项,则警报框应显示
"Answer is wrong"
我想用JavaScript创建这个验证。
您必须使用onclick属性和更多js
- 将活动手柄连接到您的按钮
- 获取无线电元素值
- 比较
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>
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>
一些更改
我对上面的代码做了一些更改,使其更加"抽象"
<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>
另一个更复杂的例子
<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>
使用required
关键字。当按下提交按钮而没有选择任何选项时,这会提示用户选择一个值。而且总是喜欢使用
<input type="submit" value="submit">
优于<button>Submit Answer</button>
在处理表单时。使用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>
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>
这里的条件显示在警报弹出框中。但我想在html标签中显示它。但点击提交按钮后,innerHTML内容显示一毫秒,然后自动删除内容。选择将如何留在innerHTML 中
document.getElementById("answerswer").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("answerswer").innerHTML = "please select choice answer";
} else if ( val == "Scripting" ) {
document.getElementById("answerswer").innerHTML = "Answer is correct !"
} else {
document.getElementById("answerswer").innerHTML = "Answer is wrong"
}
};
您可以在onClick上添加一个函数和事件,这样每当有人点击选项提交按钮时,就会出现。
相关文章:
- 从动态创建的html选择中选择所选选项
- 如何在Google chrome安全首选项文件中创建扩展安全哈希代码
- 创建了一个选项卡,但点击时不会起作用-jQuery issue/newbie
- 如何创建一个随机的计算机选项,除了你已经选择的选项
- 正在尝试创建一个选择选项
- 用CSS和Javascript创建一个选项卡系统
- 如何为下拉菜单中的不同选项创建不同数量的输入文本字段
- 使用来自 JSON 的 jquery 或 angularJS 的选项创建多个选择
- Javascript 使用下拉菜单选项创建文本字段
- 使用 JavaScript 和 AJAX 选项创建 Select HTML
- 根据选择中的选项创建选择组
- 为投递箱选项创建不同的默认值
- 选择2 - 使用预加载的选项创建 ajax
- 我可以使用 ng 选项创建指令(不使用选择标签)吗?
- 如何在弹出窗口中的同一页面上用下拉列表中的预选选项创建超链接
- 为iframe获取对象null.使用jsdom和所需选项创建iframe
- 从选择选项创建以毫秒为单位的日期数组;YYYY,M,D”;
- 如何创建一个基于下拉选项创建段落的Javascript表单
- 根据从下拉菜单中选择的选项创建查询字符串
- 当使用javascript时,我如何为一个选择的选项创建一个if语句