使用数组检查单选表单上的多重答案

Question

我需要以正确或错误的形式标记答案。 在到达这里的一些帮助下，我想出了第一个问题的解决方法，但现在我正努力将其应用于其他问题。 这是我的代码：

<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”的含义是什么。 在querySelector中。

非常感谢！！

Answer 1

尝试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]表示您正在选择第三个元素，依此类推。

使用数组检查单选表单上的多重答案

问题描述

1 个解决方案

解决方案1
0 已采纳 2015-11-28 13:31:45

使用数组检查单选表单上的多重答案

问题描述

1 个解决方案

解决方案1 0 已采纳 2015-11-28 13:31:45

解决方案1
0 已采纳 2015-11-28 13:31:45