使用警报选择多个单选按钮 [英] Selecting Multiple Radio Buttons With Alert
问题描述
基本上,我想创建一个具有类似测验结构的页面,用户可以从一个问题中选择一个选项,从另一个问题中选择另一个选项.根据每个问题的答案,它需要提醒某个输出.我只有一些基本的 Javascript 知识,所以我使用相同的理论使用文本框选择答案,但这次我想使用单选按钮.
Basically, I want create a page that has a quiz like structure and the user can select one option from one question and another from another question. Depending on the answers to each question it would need to alert a certain output. I only have some basic knowledge of Javascript so am using the same theory of using text boxes to select an answer but this time I want to use Radio buttons.
这是带有单选按钮的页面的 HTML 代码:
This is the HTML code for the page with the radio buttons:
<p>
<strong>1. This is the first question?</strong><br />
<input type="radio" name="op1" value="anw1">Option 1<br>
<input type="radio" name="op1" value="anw2">Option 2
</p>
<p>
<strong>2. This is the second question?</strong><br />
<input type="radio" name="op2" value="anw1">Option 1<br>
<input type="radio" name="op2" value="anw2">Option 2
</p>
<input type='button' value='Get result!' onClick='Submit()' /><br />
然后我现在在 head 标签中有这样的功能:
I then have the function for now in the head tag like this:
function Submit()
{
var op1 = document.getElementsByName('op1')
var op2 = document.getElementsByName('op2')
if(op1== "anw1" && op2== "anw1")
{
alert ("This would be if both options one were selected")
}
else if (op1== "anw2"&& op2== "anw2")
{
alert ("This would be if the the seconds ones were selected")
}
else
{
alert ("This would be if neither were true")
}
}
然而,我似乎无法开始工作,所以我想我可能不会以正确的方式解决这个问题,尽管我确实希望它设置类似的 .我可以让 else 部分工作,但其他部分都不行.
However, I cannot seem to get to work so I think I might be not going about this the right way though I do want it set out similar . i can get the else part to work but none of the other ones.
推荐答案
以下版本将执行您的代码尝试执行的操作:
The following version will do what your code was trying to do:
function Submit() {
var op1= document.getElementsByName('op1');
var op2= document.getElementsByName('op2');
if (op1[0].checked && op2[0].checked) {
alert("This would be if both options one were selected");
} else if (op1[1].checked && op2[1].checked) {
alert("This would be if the the seconds ones were selected");
} else {
alert("This would be if neither were true");
}
}
演示:http://jsfiddle.net/Hy9Nw/1
getElementsByName()
函数 返回一个列表(实际上是一个 HTMLCollection
),而不是单个元素,因此您不能像在代码中那样只比较 op1== "anw1"
.即使它是单个元素,您也需要说 op1.value == "anw1"
.
The getElementsByName()
function returns a list (actually an HTMLCollection
), not a single element, so you can't just compare op1== "anw1"
like in your code. Even if it was a single element you'd need to say op1.value == "anw1"
.
要访问 getElementsByName()
返回的 op1
列表中的各个项目,您可以将数组语法与 op1[0]
结合使用,并且使用 op1[0].checked
测试它是否被检查 - 返回 true
或 false
.
To access the individual items in the op1
list returned by getElementsByName()
you can use array syntax with op1[0]
, and test whether it is checked by using op1[0].checked
- which returns true
or false
.
这篇关于使用警报选择多个单选按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!