JQuery get attributes of radio input inside a group - php

Question

Here is my PHP code to generate dynamic form inputs
echo '<div class="radio" id="'.$questionID.'">';
foreach ($options as $key => $opt_value) {
$option_text = $opt_value->option_text;
$question_id = $opt_value->question_id;
$is_correct = $opt_value->is_correct;
$option_id = $opt_value->id;
echo '<label>
<input type="radio" class="optionChecked" name="optionCheck'.$questionID.'" id="'.$option_id.'" value="'.$option_id.'" data-id="'.$option_id.'" data-title="optionCheck'.$questionID.'"><p>
'.$option_text.'</p>
</label>';
}
echo '</div>';
I am generating radio buttons inside div. Each div for a question and the radio inputs are its variable options.
JQuery to get data for each question:
function fetchAttempt(){
var jsonArr = [];
$('.radio').each(function() {
var selected_option = -1;
var is_skipped = 1;
var correct_option = 0;
var quesId = $(this).attr('id');
var quesOptns = "optionCheck"+quesId;
$('.'+questOptns).each(function() {
if(($(this).val()) == 1){
correct_option = $(this).attr("id");
}else{
correct_option = -1;
}
});
jsonArr.push({
correct_option: correct_option,
is_skipped: is_skipped,
correct_option: is_right,
selected_option: selected_option,
temp_id: temp_id,
question_id: quesId
});
});
return JSON.stringify(jsonArr);
}
I struggled for more than 5 hours ... still unable to get the access the checked radio value inside a group.
I tried all possible ways... to get the value of checked radio inside a div by a name ... but it never worked.

Answer 1

I don't have your $options variable, so I created my own questions
form to simulate your situation.
To select a radio button we have only to use this jQuery $("input[type=radio]:checked") then we must check everyone of these checked radio buttons using the function .each().
Here is a full example of what you should do:
$("#submit").on("click",function(){
$("input[type=radio]:checked").each(function(){
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="radio" id="form1">
<label>Question 1
<input type="radio" class="optionChecked" name="name1" id="'id1" value="value1" data-id="option1" data-title="question1"></label><br>
<label>Question 2
<input type="radio" class="optionChecked" name="name2" id="'id2" value="value2" data-id="option2" data-title="question2"></label><br>
<label>Question 3
<input type="radio" class="optionChecked" name="name3" id="'id3" value="value3" data-id="option3" data-title="question3"></label><br>
<label>Question 4
<input type="radio" class="optionChecked" name="name4" id="'id4" value="value4" data-id="option4" data-title="question4"></label><br>
<label>Question 5
<input type="radio" class="optionChecked" name="name5" id="'id5" value="value5" data-id="option5" data-title="question5"></label><br>
<button type="button" id="submit"> Submit</button>
</div>