javascript - 检查选中的单选按钮是否返回 true 但应该为 false
问题描述
这个问题不是这样的。这里的问题源于保留先前值的 if 条件,而另一个问题是询问如何确定屏幕上显示的输入类型。
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function displayquestion(a, ignore){
var b = a-1;
var currentInput = '';
var questions = document.getElementsByClassName("questionholder");
var showRequired = document.getElementById("requiredMessage");
function showNext (){
showRequired.style.display = "none";
for(var i=0; i < questions.length; i++) {
questions[i].style.display = "none";
}
var nextQuestion = document.getElementById("question" + a);
if(nextQuestion !== null) {
nextQuestion.style.display = "block";
}
}
// Check if question should ignore inputs
if (ignore == 1) { // yes, ignore the inputs so move on to next question
console.log("path 1");
showNext();
} else { //no, don't ignore the inputs
if (document.querySelector('input.input' + b).type == "radio") { //this is a radio input
if (document.querySelector('input[type=radio]:checked')) { //a radio option is selected
console.log("path 2");
showNext();
} else { // no radio option is selected so show error
console.log("path 3");
showRequired.style.display = "block";
}
} else { // not a radio input
if (document.querySelector('input.input' + b) !== null) {
var currentInput = document.querySelector('input.input' + b).value;
}
if (currentInput == '') { // the input is blank so show error
console.log("path 4");
showRequired.style.display = "block";
} else { // the input is not blank so move on to next question
console.log("path 5");
showNext();
}
}
}
}
</script>
</head>
<body>
<div id="requiredMessage" style="display:none">
<p>This field is required.</p>
</div>
<form id="TheForm" style="display:block;">
<div data-toggle="buttons" class="questionholder multiplechoice" id="question13" style="display:block">
<h5>The world is... </h5>
<input class="input13" type="radio" id="round" name="isPrevRel" value="round">
<label for="round">
<p class="radioChoice">round</p>
</label>
<br>
<input class="input13" type="radio" id="square" name="isPrevRel" value="square">
<label for="birthcombo">
<p class="radioChoice">Square</p>
</label>
<br>
<a class="text2button radio" onclick="displayquestion(14)">Next</a>
</div>
<div data-toggle="buttons" class="questionholder multiplechoice" id="question14" style="display:none">
<h5>Do you like snow?</h5>
<input class="input14" type="radio" id="yes" name="snow" value="yes">
<label for="yes">
<p class="radioChoice">Yes. If you'd like, explain why</p>
</label>
<input class="input14" type="radio" id="no" name="snow" value="no">
<label for="no">
<p class="radioChoice">No</p>
</label>
<br>
<input name="relSNonID1"><br>
<a class="text2button radio" onclick="displayquestion(15)">Next</a>
</div>
</form>
</body>
</html>
我的 javascript 函数存在问题,该函数可以与输入文本字段和单选按钮一起使用,但在两者结合使用时不会。
简而言之,我有一个 div,它提出问题并包含一对单选按钮、一个文本输入和一个下一步按钮。当用户单击下一步时,函数 displayquestion(a) 触发。
该函数检查是否被告知忽略当前问题。如果是这样,它会隐藏 div 并显示下一个问题。
如果不是,它会检查文档是否包含一个带有 input# 类的输入(其中 # 对应于 div id question#)是一个单选输入。如果是,它会检查是否选择了一个单选选项。如果未选择任何内容,则会显示错误消息。
否则,如果输入不是无线电输入,它会检查输入是否为空白。如果为空,则显示错误消息。如果它不是空白的,它会隐藏 div。
它按预期工作,但仅当显示的 div 仅包含单选选项集或文本输入时。
如您所见,我有一个问题,必须在哪里进行单选选项,并带有可选的文本输入。
预期结果应该是显示错误消息,直到用户进行单选选择。文本输入是否完成并不重要。只有选择无线电选项,并且当用户单击下一步时,它应隐藏DIV。
相反,发生的事情是 div 隐藏了用户是什么都不做,还是做出了选择。
根据我收集的信息,问题源于
document.querySelector('input[type=radio]:checked')
即使用户看到问题 14(第二个 div),条件似乎也保留了问题 13(第一个 div)的值。我知道这一点,因为控制台日志在单击两个 div 的下一步时打印相同的值。
我相信这是因为我没有检查 input + b 但我无法添加变量。什么是适当的整合?
解决方案
您的主要问题是,当您测试选中的单选按钮时,它会检查页面中的所有单选按钮,而不仅仅是当前可见问题中的单选按钮。这不是变量“保留”其值的情况,只是选择器的范围太广,它会返回它找到的第一个选中的复选框 - 在这种情况下,恰好已经有一个来自上一个问题,所以它返回。
一些小的更改可以a)使您的代码更高效(减少对同一事物的重复查询,并且b)解决您的问题
1)为了效率和可读性,将结果document.querySelector('input.input' + b);
放入一个变量中,这样您就不必在 if 语句中重复运行相同的查询
2)检查当前问题中是否选择了单选按钮,向选择器添加限制以将范围缩小到当前问题:document.querySelector("#question" + b + " input[type=radio]:checked")
3) 出现错误,导致第一个问题无法选择“Square”选项 - 随附标签的for
属性错误,应该是<label for="square">
顺便说一句,我认为将这两个测试结合起来是不可能或不可取的(正如您在评论中提到的那样),因为它们做的事情不同。第一个测试检查问题中的第一个输入是什么类型的输入,第二个测试检查该输入的状态(一旦我们知道它肯定是一个单选按钮)。
演示:
function displayquestion(a, ignore) {
var b = a - 1;
var currentInput = '';
var questions = document.getElementsByClassName("questionholder");
var showRequired = document.getElementById("requiredMessage");
function showNext() {
showRequired.style.display = "none";
for (var i = 0; i < questions.length; i++) {
questions[i].style.display = "none";
}
var nextQuestion = document.getElementById("question" + a);
if (nextQuestion !== null) {
nextQuestion.style.display = "block";
}
}
// Check if question should ignore inputs
if (ignore == 1) { // yes, ignore the inputs so move on to next question
console.log("path 1");
showNext();
} else { //no, don't ignore the inputs
var input = document.querySelector('input.input' + b);
if (input.type == "radio") { //this is a radio input
if (document.querySelector("#question" + b + " input[type=radio]:checked")) { //a radio option is selected
console.log("path 2");
showNext();
} else { // no radio option is selected so show error
console.log("path 3");
showRequired.style.display = "block";
}
} else { // not a radio input
if (input !== null) {
var currentInput = input.value;
}
if (currentInput == '') { // the input is blank so show error
console.log("path 4");
showRequired.style.display = "block";
} else { // the input is not blank so move on to next question
console.log("path 5");
showNext();
}
}
}
}
body {
font-family: arial;
}
h1 {
font-size: 0.75em;
}
h5 {
font-size: 0.5em;
line-height: 1.5em;
margin-block-start: 0;
margin-block-end: 0;
}
h6 {
font-size: 0.35em;
margin-block-start: 0;
margin-block-end: 0;
}
br {
line-height: 0.2em;
}
p {
display: block;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
.Title {
text-align: center;
font-size: 3em;
text-decoration: underline;
}
form {
margin: 0 auto;
width: 75%;
text-align: center;
font-size: 3em;
}
form#filledForm {
display: table;
table-layout: fixed;
margin: 0 auto;
width: 100%;
font-size: 1em;
}
form#filledForm th {
text-align: left;
}
form#filledForm td {
width: auto;
font-size: 0.75em;
vertical-align: bottom;
}
form#filledForm tr.aligncenter td {
font-size: 0.75em;
vertical-align: initial;
}
form#filledForm input[name=relSNonID1] {
margin-top: 0;
}
form#filledForm input[name=relSNonID2] {
margin-top: 0;
}
.questionholder {
display: none;
}
input {
line-height: 1em;
font-size: 1em;
text-align: center;
width: 100%;
margin-bottom: 0.5em;
}
input[name=relSNonID1] {
margin-top: 0.2em;
}
input[name=relSNonID2] {
margin-top: 0.2em;
}
input[type=radio] {
margin-bottom: 0;
visibility: hidden;
}
input[type="radio"]:checked+label {
border-style: solid;
padding: 10px;
}
div[data-toggle="buttons"] label.active {
color: #7AA3CC;
}
div[data-toggle="buttons"] label {
display: inline-block;
margin-bottom: 0;
vertical-align: top;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
div[data-toggle="buttons"] label:hover {
color: #7AA3CC;
}
div[data-toggle="buttons"] label:active,
div[data-toggle="buttons"] label.active {
-webkit-box-shadow: none;
box-shadow: none;
}
.text2button {
border-style: solid;
padding: 10px;
cursor: pointer;
}
.multiplechoice {
line-height: 0.5em;
}
.radio {
line-height: 2em;
}
.radioChoice {
font-size: 0.5em;
cursor: pointer;
}
#result p {
text-align: center;
font-size: 2em;
}
<div id="requiredMessage" style="display:none">
<p>This field is required.</p>
</div>
<form id="TheForm" style="display:block;">
<div data-toggle="buttons" class="questionholder multiplechoice" id="question13" style="display:block">
<h5>The world is... </h5>
<input class="input13" type="radio" id="round" name="isPrevRel" value="round"><label for="round"><p class="radioChoice">round</p></label><br>
<input class="input13" type="radio" id="square" name="isPrevRel" value="square"><label for="square"><p class="radioChoice">Square</p></label><br>
<a class="text2button radio" onclick="displayquestion(14)">Next</a>
</div>
<div data-toggle="buttons" class="questionholder multiplechoice" id="question14" style="display:none">
<h5>Do you like snow?</h5>
<input class="input14" type="radio" id="yes" name="snow" value="yes"><label for="yes"><p class="radioChoice">Yes. If you'd like, explain why</p></label>
<input class="input14" type="radio" id="no" name="snow" value="no"><label for="no"><p class="radioChoice">No</p></label><br>
<input name="relSNonID1"><br>
<a class="text2button radio" onclick="displayquestion(15)">Next</a>
</div>
</form>
推荐阅读
- google-api - 使用新 Gmail 主题时,Google Tasks API 不会提供有关任务完成的更新
- redis - 如何在本地配置 Redis 缓存?
- html - PWA 与 html5 网络应用?
- c# - 如果代码有其他方法可以编写吗?
- java - Java Swing JTextArea 行号
- php - 如何在 Laravel 5.6 中为每个通知文件创建具有单独通知表的多个通知文件
- android - 如何在不在线的情况下发送通知?
- c# - 从程序集中获取所有资源的列表
- ios - 将 ASWebAuthenticationSession 与 OAuth 或任何 Web 服务一起使用?
- sql - sql转换数据类型cast和convert