How to loop over all the selected elements of an HTML page using jquery

Question

I am working on a Quiz Application where I need to get all the selected elements or the user answers . These elements can be radio input, check-box input or the text field. every element is assigned a question_id attribute, answer_id and a mark attribute with it. What I want to do is I have to get these all question_id , answer_id and mark attribute so that I can calculate marks, and send the both question_id and answer_id to DB so that i can store the related user answer under a particular question. i have rendered the quiz on template using this code.

$(data.quiztopics).each(function(index,element){
    $(element.questions).each(function(index,question){
        $(".quiz").append("<form name='question' class= question_"+question.id+"><input type='text' disabled value="+question.question_text+"/><br></form>");
        if(question.question_type=='NUM'){
            $(question.answers).each(function(index,answer){
                $(".question_"+question.id).append("<input type='radio' question_id='+question.id+'answer_id='+answer.id +'name='answer' class=answer_"+answer.id+" mark="+answer.marks+"value="+answer.answer_text+">"+answer.answer_text+"</input>")
            });
        }
        else if(question.question_type=='MCQ'){
            $(question.answers).each(function(index,answer){
                $(".question_"+question.id).append("<input type='checkbox' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
            });
        }
        else if(question.question_type=='FIB'){
            $(question.answers).each(function(index,answer){
                $(".question_"+question.id).append("<input type='text' question_id='+question.id+'answer_id='+answer.id +' name='answer' class=answer_"+answer.id+">"+answer.answer_text+"</input>")
            });
        }
    });
});

tell me how can i get the attributes of the selected elements for submitting the quiz.

Answer 1

I have solved this problem by getting all the elements available in the DOM by their name, using getElementsByName('answer') method. It returns me a list then looping over this list i checked if the element is check or not if it is checked i get their attributes.

attributes_list=new Array()
var answers=document.getElementsByName('answer');
for(i=0;i<answers.length;i++){
    if(answers[i].checked){
            question_id=answers[i].attributes['question_id'].value
            answer_id=answers[i].attributes['answer_id'].value
            attributes_list.push({'que':question_id,'ans':answer_id});
        }
}

Answer 2

I think this will do:

var questions = {};

$(".quiz :selected, .quiz :checked, .quiz input[type=text]").each({
   var $this = $(this);
   var question = $this.attr('question_id');
   questions[question] = {
       answer: $this.attr('class'),
   };
});

Answer 3

its very simple, you just have to use element.attr( attributeName ) function

JQuery documentation

A little JSFIddle to get you going

alert("Radio Mark " + $("#one").attr('mark') + ", Radio Value " + $("#one").attr('value'));

alert("check Mark " + $("#two").attr('mark') + ", check Value " + $("#two").attr('value'));