用javascript创建多选选项

Creating a multiple choice option in javascript

本文关键字:选项 创建 javascript      更新时间:2023-09-26

我创建了一个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

  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>

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上添加一个函数和事件,这样每当有人点击选项提交按钮时,就会出现。