- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要将表单中的答案标记为正确或错误。在我到达这里的一些帮助下,我想出了如何针对第一个问题这样做,但现在我正在努力将它应用于其他问题。这是我的代码:
<head>
<style type="text/css">
.wrong {width:250px ;border:1px solid #ff0000; border-style:solid; }
.right {width:250px; border:1px solid #00ff00; border-style:solid; }
</style>
</head>
<body>
<form id="office">
<label id="ques1"> question 1</label>
<div class="q1 q1a1"><input type="radio" name="question1" value="q1a1" /> Answer1 <br/></div>
<div class="q1 q1a2"><input type="radio" name="question1" value="q1a2" /> Answer2 <br/></div>
<div class="q1 q1a3"><input type="radio" name="question1" value="q1a3" /> Answer3 <br/></div>
<div class="q1 q1a4"><input type="radio" name="question1" value="q1a4" /> Answer4 <br/></div>
<br/><br/>
<label> question 2</label>
<div class="q2 q2a1"><input type="radio" name="question2" value="q2a1"/> Answer1 <br/></div>
<div class="q2 q2a2"><input type="radio" name="question2" value="q2a2"/> Answer2 <br/></div>
<div class="q2 q2a3"><input type="radio" name="question2" value="q2a3"/> Answer3 <br/></div>
<div class="q2 q2a4"><input type="radio" name="question2" value="q2a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 3</label>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a1"/> Answer1 <br/></div>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a2"/> Answer2 <br/></div>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a3"/> Answer3 <br/></div>
<div class="q3 q3a1"><input type="radio" name="question3" value="q3a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 4</label>
<div class="q4 q4a1"><input type="radio" name="question4" value="q4a1"/> Answer1 <br/></div>
<div class="q4 q4a2"><input type="radio" name="question4" value="q4a2"/> Answer2 <br/></div>
<div class="q4 q4a2"><input type="radio" name="question4" value="q4a3"/> Answer3 <br/></div>
<div class="q4 q4a4"><input type="radio" name="question4" value="q4a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 5</label>
<div class="q5 q5a1"><input type="radio" name="question5" value="q5a1"/> Answer1 <br/></div>
<div class="q5 q5a2"><input type="radio" name="question5" value="q5a2"/> Answer2 <br/></div>
<div class="q5 q5a3"><input type="radio" name="question5" value="q5a3"/> Answer3 <br/></div>
<div class="q5 q5a4"><input type="radio" name="question5" value="q5a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 6</label>
<div class="q6 q6a1"><input type="radio" name="question6" value="q6a1"/> Answer1 <br/></div>
<div class="q6 q6a2"><input type="radio" name="question6" value="q6a2"/> Answer2 <br/></div>
<div class="q6 q6a3"><input type="radio" name="question6" value="q6a3"/> Answer3 <br/></div>
<div class="q6 q6a4"><input type="radio" name="question6" value="q6a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 7</label>
<div class="q7 q7a1"><input type="radio" name="question7" value="q7a1"/> Answer1 <br/></div>
<div class="q7 q7a2"><input type="radio" name="question7" value="q7a2"/> Answer2 <br/></div>
<div class="q7 q7a3"><input type="radio" name="question7" value="q7a3"/> Answer3 <br/></div>
<div class="q7 q7a4"><input type="radio" name="question7" value="q7a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 8</label>
<div class="q8 q8a1"><input type="radio" name="question8" value="q8a1"/> Answer1 <br/></div>
<div class="q8 q8a2"><input type="radio" name="question8" value="q8a2"/> Answer2 <br/></div>
<div class="q8 q8a3"><input type="radio" name="question8" value="q8a3"/> Answer3 <br/></div>
<div class="q8 q8a4"><input type="radio" name="question8" value="q8a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 9</label>
<div class="q9 q9a1"><input type="radio" name="question9" value="q9a1"/> Answer1 <br/></div>
<div class="q9 q9a2"><input type="radio" name="question9" value="q9a2"/> Answer2 <br/></div>
<div class="q9 q9a3"><input type="radio" name="question9" value="q9a3"/> Answer3 <br/></div>
<div class="q9 q9a4"><input type="radio" name="question9" value="q9a4"/> Answer4 <br/></div>
<br/><br/>
<label> question 10</label>
<div class="q10 q10a1"><input type="radio" name="question10" value="q10a1"/> Answer1 <br/></div>
<div class="q10 q10a2"><input type="radio" name="question10" value="q10a2"/> Answer2 <br/></div>
<div class="q10 q10a3"><input type="radio" name="question10" value="q10a3"/> Answer3 <br/></div>
<div class="q10 q10a4"><input type="radio" name="question10" value="q10a4"/> Answer4 <br/></div>
<br/><br/>
<input type="button" id="submit" name="submitAnswers" value="Submit Your Answers" onclick="checkFunction()" />
</form>
<script type="text/javascript">
function checkFunction() {
var checked = document.querySelectorAll('input[type="radio"]:checked');
var div = document.querySelectorAll('div.'+checked[0].value);
console.dir(checked[0]);
if (checked[0].value === 'q1a3') {
div[0].classList.add('right')
} else {
div[0].classList.add('wrong')
}
};
</script>
</body>
</html>
有人可以帮忙吗?
我不太明白 [0] 的含义以及接下来如何使用它。此外,div 变量和“div”的含义是什么。在查询选择器中。
非常感谢!!
最佳答案
尝试 for
循环。首先为每个问题的正确答案添加一个类correctAnswer
。例如,如果第一个 div 的正确答案是第三个答案,则在 value
属性之后添加代码 class="correctAnswer"
。
将类添加到每个正确答案后,使用以下 JavaScript:
function checkFunction() {
var checked = document.querySelectorAll('input[type="radio"]:checked');
for(i = 0; i < checked.length; i++){
var div = document.querySelectorAll('div.'+checked[i].value);
if (checked[i].classList.contains('correctAnswer')) {
div[0].classList.add('right')
} else {
div[0].classList.add('wrong')
}
}
};
checked[0]
基本上意味着您正在从找到的元素数组中选择第一个元素。所以 checked[1]
意味着您正在选择第二个元素,checked[2]
意味着您正在选择第三个元素,依此类推。
关于javascript - 使用数组检查单选形式的多个答案,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33971800/
我需要根据需要动态设置文本区域,但它不想正常工作。 JQuery 会自行检查,但无法检查是否已检查。但是当您在第二个单选框内单击时,始终需要文本区域。我尝试了很多次让它工作,但它仍然有问题。我添加了“
我需要在 Django 中进行 API 调用(某种形式),作为我们所需的自定义身份验证系统的一部分。用户名和密码通过 SSL 发送到特定 URL(对这些参数使用 GET),响应应该是 HTTP 200
我将在我的可移植 C 代码中使用 #warning 来生成编译时警告。但并非所有平台都支持 #warning。有什么方法可以找到该平台是否支持 #warning。 #ifdef warning
我编写了一个函数来检查某个数字是否存在于某个区间内。停止搜索的最佳方法是什么?这个: for (i = a; i <= b; i++) { fi = f(i); if (fi == c) {
我想知道在 c 中是否有一种方法可以检查,例如在 for 函数中,如果变量等于或不等于某些字符,而不必每次都重复进行相等性检查。如果我没记错的话,以这种方式检查相等性是不正确的: if (a == (
我有如下日志功能 void log_error(char * file_name, int line_num, int err_code) { printf("%s:%d:%s\n", fil
使用 ssh-keygen 生成的 key 对在 macOS 上可以有不同的格式。 macOS 可读的标准 PEM ASN.1 对象 SecKey API 带有文本标题的 PEM OpenSSH ke
我正在尝试编写一个 excel if 语句。我不熟悉使用 Excel 具有的所有额外功能。我正在使用一个名为 importXML() 的函数.我正在尝试检查我正在使用的函数是否生成“#VALUE!”错
有没有办法检查是否没有 AIO 写入给定文件?我在我的 Unix 类(class)上制作了一个项目,该项目将是一个上下文无关(基于 UDP)的国际象棋服务器,并且所有数据都必须存储在文件中。应用程序将
我有一个如下所示的函数: public Status execute() { Status status = doSomething(); if (status != Stat
我正在使用 Composer,我不希望 PhpStorm 在 vendor 文件夹上运行任何错误检查或检查,因为它对 vendor/中的某些代码显示误报composer/autoload_static
Chapel 的一个很好的特性是它区分了数组的域和它的分布。检查两个数组是否具有相同的域和分布(通常想要的)的最佳方法是什么? 我能看到的最好的方法是检查 D1==D2和 D1.dist==D2.di
在我的 JavaScript 函数中,我为所有输入、文本区域和选择字段提供实际值作为 initial_value: $('input, textarea, select').each(function
我正在编写一个分解为几个简单函数的 PHP 类。在构造函数中,它调用另一个名为 processFile 的函数。该函数调用 5 个私有(private)函数并进行检查。如果检查失败,它会将消息分配给
这个问题已经有答案了: How to detect if user it trying to open a link in a new tab? (2 个回答) 已关闭 7 年前。 我认为 JavaS
我正在浏览我们的代码库并看到很多这样的测试: declare @row_id int = ... declare @row_attribute string select @row_attribu
我正在声明一个用作比较的函数。我的问题是: 为什么条件充当语句? 为什么第 4 行可以工作,而第 5 行却不行? 我知道这段代码不切实际且未使用,但为什么编译器允许这种语法? 谷歌没有找到答案。但话又
到目前为止,我有一个带有空文本字段的 PHP Kontaktform,并使用以下命令检查了所需的字段: $name = check_input($_POST['name'], "请输入姓名。"); 现
目前,我能想到的合理检查的唯一方法没有臃肿的逻辑: if ( $value > 0 ) { // Okay } else { // Not Okay } 有没有更好的办法? 最佳答案
我正在尝试运行一个脚本,如果 i 存在(意味着存在 i 值,任何值)或其他部分,我希望运行其中的一部分如果i没有值就运行,有人可以启发我吗? 我说的是 for 循环,比如 for (var i=0;
我是一名优秀的程序员,十分优秀!