Question

我做了以下小测验。 http://jsfiddle.net/HattrickNZ/z7LDr/

我想知道如何在显示单选按钮时没有选择选项？他们目前展示了之前选择的任何内容。我还想知道如何制作我在<script>标签中传递的一些文字粗体或如何输入新行（我已尝试<br>和＆＃34; \ n＆＃34 ;）？

此外，任何其他一般建议都会受到赞赏，因为我想使用新方法改进这个小测验（EG建议来自其他地方...更好的方法是使用带有JSON数据结果的异步调用..）tks

<!DOCTYPE html>
    <html>
    <head>
    <Title> Title: My Quiz </title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head>
    <body>
    <div>
    <span id="question">Welcom to my Game hit next to play...</span>
    </br>
    <span id="answer" >possible answers will go here...</span>
    <div id="radio" style="display:none">
        <div id="rd1"></div><input type="radio" name="ans" value=""/>
        <div id="rd2"></div><input type="radio" name="ans" value=""/>
        <div id="rd3"></div><input type="radio" name="ans" value=""/>
        <div id="rd4"></div><input type="radio" name="ans" value=""/>
    </div>
    </br>
    <button id ="up"> next </button> 
    </br>
    </br>

    <span id="test" >--------------This is for Test Purposes------------- </span> <br>

    <span id="Qindex" >want to keep an eye on Qindex here </span> <br>

    <span id="whatRadioButton" >want to keep an eye on what radio button was selected... </span> <br>

    <span id="whatRightAnswer" >what is the right answer between [0,1,2,3]... </span>

    <!-- <button id ="next_answer"> next answer </button>   -->
    </div>

    <script>
    var allQuestions = [
    ["Who is Prime Minister of the United Kingdom?", 
    "What is my favourite colour?",
    "What shape is the moon?",
    "What year was the car invented?",
    "What day do catholics go to mass?"],[
    ["David Cameron", "Gordon Brown", "Winston Churchill", "Tony Blair"], 
    ["Red","Blue","Green","Another"],
    ["Square","Rectangle","Pentagon","Round"],
    ["1914","1924","1934","None of the above"],
    ["Never","Sunday","Tuesday","Monday"]], 
    [0,1,3,3,1]]; 
    //Correct answers go here  between 0,1,2,3
    var questionIndex = 0
    var score = 0;

            $("#up").on("click", function () {
            questionIndex+=1
            if (questionIndex <=5) {
                    $("#question").text("<b>Question " + questionIndex +"</b>: " + allQuestions[0][questionIndex-1]) 

                            document.getElementById("answer").style.display = "none"; //hide the span <span id="answer" >
                            document.getElementById("radio").style.display = "inline-block"; // display the radio buttons

                            document.getElementById("rd1").value = allQuestions[1][questionIndex-1][0]; //change the value attribute of id=rd*
                            document.getElementById("rd2").value = allQuestions[1][questionIndex-1][1];
                            document.getElementById("rd3").value = allQuestions[1][questionIndex-1][2];
                            document.getElementById("rd4").value = allQuestions[1][questionIndex-1][3];
                            document.getElementById("rd1").innerHTML = allQuestions[1][questionIndex-1][0]; //change the innerHTML(the text that    
                            document.getElementById("rd2").innerHTML = allQuestions[1][questionIndex-1][1]; //appear in the browser) of id=rd*
                            document.getElementById("rd3").innerHTML = allQuestions[1][questionIndex-1][2];
                            document.getElementById("rd4").innerHTML = allQuestions[1][questionIndex-1][3];
                            //document.getElementById("rd1").checked==false; // trying to reset no radio button is selected - does not work
                            //document.getElementById("rd2").checked==false;
                            //document.getElementById("rd3").checked==false;
                            //document.getElementById("rd4").checked==false;

                    var radioButtons = $("#radio input:radio[name='ans']");
                    var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));

                    if(selectedIndex ===allQuestions[2][questionIndex-2]) {
                        score+=1;
                    }

                    //these are for test purposes
                    $("#whatRadioButton").text("What index answer you selected[0,1,2,3] = " + selectedIndex)
                    $("#Qindex").text("QuestionIndex = " + questionIndex) 
                    $("#whatRightAnswer").text( "Correct answer index is: " + allQuestions[2][questionIndex-2] + "\n" + 
                                                "Answer selected was: " +  selectedIndex + 
                                                "Your score is: " + score )
            }
            else if(questionIndex ===6){//end of game //no more questions

                    document.getElementById("radio").style.display = "none";//hide these id's for the end of the game 
                    document.getElementById("up").style.display = "none"; //hide the next button with id = up
                    $("#Qindex").text("QuestionIndex = " + questionIndex) 

                    var radioButtons = $("#radio input:radio[name='ans']");
                    var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));

                    if(selectedIndex ===allQuestions[2][questionIndex-2]) {
                        score+=1;
                    }

                    $("#question").text("This is the End of the Quiz <br> Your score was " + score + "/5 \n Thanks you for playing...") 

                    //these is for test purposes...
                    $("#whatRadioButton").text("What index answer you selected[0,1,2,3] = " + selectedIndex)
                    $("#whatRightAnswer").text( "Correct answer index is: " + allQuestions[2][questionIndex-2] + "\n" + 
                                                "Answer selected was: " +  selectedIndex + 
                                                "Your score is: " + score )

            }

            });


    </script>

    </body>
    </html>

Answer 1

要取消选中广播，您可以添加

$('[name="ans"]').prop('checked', false);

到

$("#up").on("click", function () {

Answer 2

即使您的收音机应该是动态的，您也可以在click功能的末尾添加此行：

$(':checked').prop('checked', false)

小提琴：http://jsfiddle.net/z7LDr/1/

Answer 3

如果您不想使用库，可以使用普通的javascript JSFiddle：http://jsfiddle.net/czFRP/

var buttons = document.getElementsByClassName('radioButtons');
for (var i = 0; i < buttons.length; ++i) {
    var item = buttons[i];  
    item.checked = false;
}

您还需要在单选按钮中添加一个类

<div id="rd1"></div><input type="radio" name="ans" value="" class="radioButtons"/>
<div id="rd2"></div><input type="radio" name="ans" value="" class="radioButtons"/>
<div id="rd3"></div><input type="radio" name="ans" value="" class="radioButtons"/>
<div id="rd4"></div><input type="radio" name="ans" value="" class="radioButtons"/>

单选按钮html jquery

3 个答案: