如何确定在Javascript中选择了哪个单选按钮

时间:2013-04-27 14:42:32

标签: javascript radio-button selected

Hey Guys我试图找出如何确定使用javascript选择哪个单选按钮...我知道使用一些jquery会更容易,但我现在会更好地使用javascript ..我知道我可以获得价值按名称(getElementsByName)的元素,并从那里确定它。但不知怎的,它不起作用....这是我的JS小提琴         http://jsfiddle.net/sean3200/LdNCT/以下是我的代码示例...谢谢!!!!

    var questions = {

                        allQuestions : [


                    {
                        topQuestion:["Click on which producer produced Justins Timberlake 4th Album?", "What was the first disney movie Justin Timberlake firsr scored?", "What famous celebrity did Justin Timberlake dated ?", "Star Wars"],
                    },    
                    {
                        question: "Select which movie did Justin Timberlake film score in 2008?", 
                        choices:["Shark Tank", "The Incredibles", "Finding Memo", "Star Wars"],
                        correctAnswer:3
                    },
                    {

                        question:"What city was Justin Timberlake born in?",
                        choices: ["Chicago", "Detroit", "Tenessee", "New York"],
                        correctAnswer:3
                    },
                     {

                        question:"At the age of 11, what famous show did Justin Timberlake appeared on?",
                        choices: ["American Idol", "Family Fued", "Star Search", "The Voice"],
                        correctAnswer:3
                    },
                     {

                        question:"What hit single did Justin Timberlake perform at the MTV Awards in 2002",
                        choices: ["Sexy Love", "Cry Me A River", "Like I Love You", "What Comes Around"],
                        correctAnswer:3
                    },
                     {

                        question:"What boy band was Justin Timberlake apart of?",
                        choices: ["One Direction", "Black Street Boys", "98 Degrees", "NSync"],
                        correctAnswer:4
                    }    
                        ]
                    };

                    var newQues = Object.create(questions);


                    for (var i = 0; i < 4; i++){


                    container = document.getElementById("container");
                    list = document.getElementById("list");
                     var li = document.createElement("input");     
                     li.type = 'radio';
                     li.name= 'radio_group';    
                     li.id = 'id1'; 
                     li.value = newQues.allQuestions[1].correctAnswer;                        

                     document.body.appendChild(li); 
                     el = document.createElement("div");
                     text = document.createTextNode(newQues.allQuestions[1].choices[i])
                     list.appendChild(el); 
                     el.appendChild(li);
                     el.appendChild(text);                        

                    }


             var radios = document.getElementsByName("radio_group");
              for (var i = 0; i < radios.length; i++) {
               if (radios[i].checked) {                       
                 alert(radios[i].value)                          
                   }
               };

1 个答案:

答案 0 :(得分:0)

演示:http://jsfiddle.net/LdNCT/2/

你的单选按钮没有eventListener,我添加了一个现在可用的

radios[i].addEventListener('change', function() {
    alert(this.value);
});