RadioButton 总是返回 false - JavaScript
RadioButton always returning false - JavaScript
我有一个HTML页面,其中有许多部分,输入由RadioButtons
和CheckBox
组成。其中第一个是这样的:
<div style="margin-top: 30px; height: 270px;">
<input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/>True<br/>
<input type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>
在最终输入之后,我正在寻找每个输入并调查是否检查了正确答案。以下是执行此工作的脚本部分:
var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
var ele = document.getElementById(ansList[k]);
result = result & ele.checked ;
}
其中此迭代的thisFrame
是 replaceAble1
。调试后很明显我在ansList[k]
中获得了正确的元素 id,即 Answer1
.现在的问题是,每次检查Answer1
是否ele.checked
都会返回false
。可能是什么原因?
更新:
我认为最好放置完整的代码。所以这里是:
<div id="replaceAble1">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question1">Do you live in Pakistan?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer1" type="radio" name="Answers" title="True" onclick="setAnswered();"/>True<br/>
<input type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>
<div id="replaceAble1_n" style="display: none;">null</div>
</div>
<div id="replaceAble2" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q.
<span id ="question2">Do you go for cycling daily?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input type="radio" name="Answers" title="True" onclick="setAnswered();" />True<br/>
<input id="Answer2" type="radio" name="Answers" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble2_a" style="display: none;">Answer2</div>
<div id="replaceAble2_n" style="display: none;">null</div>
</div>
<div id="replaceAble3" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question3">When Do you Sleep?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="notAnswer1" type="checkbox" name="Answers" title="True" onclick="setAnswered();"/>Morning<br/>
<input id="notAnswer2" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Evening<br/>
<input id="Answer3" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Night
</div>
<div id="replaceAble3_a" style="display: none;">Answer3</div>
<div id="replaceAble3_n" style="display: none;">notAnswer1,notAnswer2</div>
</div>
<div id="replaceAble4" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question4">What Do you Eat?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer4" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Launch<br/>
<input id="Answer5" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Break Fast<br/>
<input id="Answer6" type="checkbox" name="Answers" title="False" onclick="setAnswered();" />Dinner<br/>
</div>
<div id="replaceAble4_a" style="display: none;">Answer4,Answer5,Answer6</div>
<div id="replaceAble4_n" style="display: none;">null</div>
</div>
脚本是:
var i = 0;
var answered = false;
var score = 0;
var unitScore = 5;
var totalScore = 20;
var frameList = ["replaceAble1", "replaceAble2", "replaceAble3", "replaceAble4"];
function setAnswered() {
answered = true;
}
function displayAnswer(isTimeUp) {
var Message;
var j;
if (isTimeUp) {
Message = "Times Up";
} else {
Message = "Quiz End";
}
for (j = 0; j < frameList.length; j++) {
var result = true;
var thisFrame = frameList[j];
var ansList = document.getElementById(thisFrame + "_a").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
var ele = document.getElementById(ansList[k]);
result = result & ele.checked ;
}
ansList = document.getElementById(thisFrame + "_n").innerHTML.split(",");
for (var k = 0; k < ansList.length; k++) {
if (ansList[k] !== "null")
result = result & (!document.getElementById(ansList[k]).checked);
}
if (result) {
score = Number(score) + Number(unitScore);
}
}
document.getElementById("QuestionPan").style.display = "none";
document.getElementById("resultPan").style.display = "block";
document.getElementById("message").innerHTML = Message;
document.getElementById("totalMarks").innerHTML = totalScore;
document.getElementById("score").innerHTML = score;
var timetaken = count - document.getElementById("time").innerHTML;
document.getElementById("timetaken").innerHTML = timetaken + " minutes";
}
function submition() {
if (!answered) {
alert("Please select at least one Answer for this question.");
return;
}
if (i === (frameList.length - 1)) {
displayAnswer(false);
return;
}
document.getElementById(frameList[i++]).style.display = "none";
document.getElementById(frameList[i]).style.display = "block";
document.getElementById("counter").innerHTML = (Number(i) + 1) + '/' + frameList.length;
answered = false;
}
只有第一个答案,即 Answer1
导致此问题。其他一切都工作正常。
您可能
希望使用布尔&&
运算符,而不是按位&
运算符。
result = result && ele.checked;
这也取决于之前的 result
值。我不完全确定这是你现阶段的问题。
更新
我无法重现该问题。见 http://jsfiddle.net/QA26Q/
我唯一的另一个想法是,您有多个具有相同 ID 的单选按钮,如本例所示 - http://jsfiddle.net/QA26Q/1/。
有问题了。问题出在 HTML 上,而不是 JavaScript 上。我错误地将所有输入的name
字段设置为相同,即 Answer
.因此,所有replaceable
div
中的所有单选按钮都属于同一组。因此,当我设置replaceable2
的Answer2
时,replaceable1
的单选按钮被重置。由于不可见,我无法跟踪此错误。所以简单地我把html改成了
<div id="replaceAble1">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question1">Do you live in Pakistan?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer1" type="radio" name="Answers1" title="True" onclick="setAnswered();"/>True<br/>
<input type="radio" name="Answers1" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble1_a" style="display: none;">Answer1</div>
<div id="replaceAble1_n" style="display: none;">null</div>
</div>
<div id="replaceAble2" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q.
<span id ="question2">Do you go for cycling daily?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input type="radio" name="Answers2" title="True" onclick="setAnswered();" />True<br/>
<input id="Answer2" type="radio" name="Answers2" title="False" onclick="setAnswered();" />False
</div>
<div id="replaceAble2_a" style="display: none;">Answer2</div>
<div id="replaceAble2_n" style="display: none;">null</div>
</div>
<div id="replaceAble3" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question3">When Do you Sleep?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="notAnswer1" type="checkbox" name="Answers3" title="True" onclick="setAnswered();"/>Morning<br/>
<input id="notAnswer2" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" />Evening<br/>
<input id="Answer3" type="checkbox" name="Answers3" title="False" onclick="setAnswered();" />Night
</div>
<div id="replaceAble3_a" style="display: none;">Answer3</div>
<div id="replaceAble3_n" style="display: none;">notAnswer1,notAnswer2</div>
</div>
<div id="replaceAble4" style="display: none;">
<span style="font-size: 14pt ;margin-top: 5px;">Q
<span id ="question4">What Do you Eat?</span>
</span>
<div style="margin-top: 30px; height: 270px;">
<input id="Answer4" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Launch<br/>
<input id="Answer5" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Break Fast<br/>
<input id="Answer6" type="checkbox" name="Answers4" title="False" onclick="setAnswered();" />Dinner<br/>
</div>
<div id="replaceAble4_a" style="display: none;">Answer4,Answer5,Answer6</div>
<div id="replaceAble4_n" style="display: none;">null</div>
它工作正常。
相关文章:
- JavaScript-切换“;全部检查”;复选框true/false
- 如何使用javascript将字段强制设置为false
- Javascript If else 只返回 TRUE 或只返回 FALSE
- PHP strtotime()为JavaScript日期字符串返回false
- 在JavaScript中为true==1和false==0
- 为什么javascript在'return false'
- 如何通过Javascript启用链接按钮最初设置为Enable=false
- 表单验证JavaScript编号总是返回false
- 获取Javascript中单选按钮的true或false
- Javascript 'while' 循环,如果条件为 false,如何停止迭代
- 当可见属性设置为 false 时,使用 JavaScript 删除空格
- 为什么 javascript 返回对象位置 true 或 false
- Javascript 下划线每个总是返回 false
- 为什么}!{ 在 JavaScript 控制台中导致 False
- 在 JavaScript 中,为什么 []==false 为 true
- 基本JavaScript不断返回false
- 布尔对象上的逻辑 NOT 在 Javascript 中总是返回 false
- Javascript缩小为什么是false替换为!1和真与!0
- “;javascript:“"#&”;,以及“;javascript:false"在iframe.sr
- Javascript似乎在说true ==false