在javascript中创建一个多选选项

Question

我创建了一个 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" 。
• 如果选择了“脚本”选项，警告框应显示"Answer is correct !"
• 如果选择了不同于“脚本”的选项，警告框应显示"Answer is wrong" 。

我想在 JavaScript 中创建此验证。

Answer 1

您必须使用 onclick 属性和更多 js

1. 将事件处理程序附加到您的按钮
2. 获取无线电元素值
3. 相比

 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>

Answer 2

干得好！ 我还附上了一些评论。

https://jsbin.com/mobesaqiba/edit?html,js,console,output

Answer 3

 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>

Answer 4

使用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>

Answer 5

这里的情况显示在警报弹出框中。 但我想在 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"
  }
};

Answer 6

您可以添加一个函数和事件 onClick 以便每当有人点击选项提交按钮时就会出现。