多项选择测验 - 单选按钮和功能问题

时间:2014-11-02 02:01:00

标签: javascript html forms radio-button

我正在尝试使用HTML表单标签中的简单函数和单选按钮创建一个多项选择测验,但它只允许我为整个测验检查一个单选按钮,而不是每个问题一个。

此外,提交按钮没有激活函数checkAll,我不知道这是因为我试图做一些不可能或简单的事情,因为我只是遗漏了一些东西。任何帮助,将不胜感激!

代码如下。 。 。我只是JavasScript和html以及StackOverflow的新手,很抱歉如果我对这个问题做错了。

<head>
<script language="javascript">
var score=0;

function checkAll() {

function questioncheckOne(){
    var correctAnswer = document.getElementById("a3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckTwo(){
    var correctAnswer = document.getElementById("b2")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckThree(){
    var correctAnswer = document.getElementById("c4")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckFour(){
    var correctAnswer = document.getElementById("d3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};


function questioncheckFive(){
    var correctAnswer = document.getElementById("e3")
    if (correctAnswer.checked == true) {
        score++;
        alert("Correct, your score is now " +score)
    }
    else {
            alert("Wrong, your score is now " +score)
    }
};

};
</script>
</head>

<body>

<form name ="Where in the world is...?">

<p>

    Question1: Where in the world would you find the Spire? 

</p> 

<input type="radio" name="radio" id="a1" value="a1"  /> Kerry. </input>
<input type="radio" name="radio" id="a2" value="a1"  /> Galway. </input>
<input type="radio" name="radio" id="a3" value="a1"  /> Dublin. </input>
<input type="radio" name="radio" id="a4" value="a1"  /> Donegal. </input>


<p> 


    Question2: Where in the world would you find the Colosseum? 

</p> 


<input type="radio" name="radio" id="b1" value="a2"  /> Taipei. </input>
<input type="radio" name="radio" id="b2" value="a2"  /> Rome. </input>
<input type="radio" name="radio" id="b3" value="a2"  /> Reykjavic. </input>
<input type="radio" name="radio" id="b4" value="a2"  /> Brussels. </input>


<p> 

    Question3: Where in the world would you find the Taj Mahal? 

</p> 


<input type="radio" name="radio" id="c1" value="a3"  /> London. </input>
<input type="radio" name="radio" id="c2" value="a3"  /> Brisbane. </input>
<input type="radio" name="radio" id="c3" value="a3"  /> Paris. </input>
<input type="radio" name="radio" id="c4" value="a3"  /> Agra. </input>


<p> 

    Question4: Where in the world would you find the Parthenon? 

</p> 


<input type="radio" name="radio" id="d1" value="a4"  /> Edinburgh. </input>
<input type="radio" name="radio" id="d2" value="a4"  /> Oslo. </input>
<input type="radio" name="radio" id="d3" value="a4"  /> Athens. </input>
<input type="radio" name="radio" id="d4" value="a4"  /> Pyongyang. </input>


<p> 



    Question5: Where in the world would you find the Niagara Falls? 

</p>


<input type="radio" name="radio" id="e1" value="a5"  /> Hong Kong. </input>
<input type="radio" name="radio" id="e2" value="a5"  /> Moscow. </input>
<input type="radio" name="radio" id="e3" value="a5"  /> New York. </input>
<input type="radio" name="radio" id="e4" value="a5"  /> Ottawa. </input>



<p>

<input type="button" name="submit" id="submit" value="submit" onclick="checkAll()"  /> </input>

</p>


</form>

</body>
</html>

2 个答案:

答案 0 :(得分:1)

您需要为每组单选按钮设置name属性。目前,它们都被命名为radio

至于checkAll函数,问题是你只是定义函数,从不调用它们。在checkAll函数中,实际调用您定义的其他函数:

function checkAll() {
    // existing function definitions here

    questioncheckOne();
    questioncheckTwo();
    // etc
}

答案 1 :(得分:0)

当您选中单选按钮时,将取消选中所有其他具有相同名称的按钮。在你的情况下,你会希望每个问题的无线电都有一个单独的名称(现在,它们都是“无线电”)