Develop Reference

Sum of Radio button values printed to the user

I'm very new to html.
I have a survey with two questions where the question choices are presented with radio buttons as this html code shows:
<form>
<p id="description">1. Question 1?</p>
<p>
<label><input type="radio" name="q1" value="5" /> Yes</label>
<label><input type="radio" name="q1" value="0" /> No</label>
</p>
<p id="description">2. Question 2?</p>
<p>
<label><input type="radio" name="q2" value="5" /> Yes</label>
<label><input type="radio" name="q2" value="0" /> No</label>
</p>
</form>
I want to print to the user the sum of his two selections.
So the output could be "You score is 10." if he answered yes to both questions etc.
How can I do this in the simplest way with the code being on the same page as the html code above? Is that possible?

var question1Answers = document.getElementsByName('q1');
var question2Answers = document.getElementsByName('q2');
var answer = 0;
question1Answers.forEach((e) => {
if (e.checked) {
answer += e.value;
break;
}
});
question2Answers.forEach((e) => {
if (e.checked) {
answer += e.value;
break;
}
});
console.log(answer);

please try this:
$("input[type='button']").click(function () {
var score = getChecklistItems();
alert("You score is : " + score);
});
function getChecklistItems() {
var total_score = 0
var result = $("input:radio:checked").get();
var checked_value = $.map(result, function (element) {
return $(element).attr("value");
});
for (i = 0; i < checked_value.length; i++) {
total_score += parseInt(checked_value[i])
}
return total_score
}
<form>
<p id="description">1. Question 1?</p>
<p>
<label><input type="radio" name="q1" value="5" /> Yes</label>
<label><input type="radio" name="q1" value="0" /> No</label>
</p>
<p id="description">2. Question 2?</p>
<p>
<label><input type="radio" name="q2" value="5" /> Yes</label>
<label><input type="radio" name="q2" value="0" /> No</label>
</p>
<p><input type="button" value="Submit"></p>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

js radio buttons check

i am trying to add mutliple choice exam questions (like survey) to my site. For that i am using js and jquery. i added feature to make sure all group buttons have been checked. But the error is that I cannot resolve properly checking of selected ones. Js check only first if and if it is true then all questions have been answered true, if not then all answers are wrong.
here is my js code:
function doAjaxPost() {
var result = 4;
var rightAnswers = 0;
var allmarked = 0;
var response = "";
$('.answers').each(function() {
if ($(this).find('input[type="radio"]:checked').length > 0) {
allmarked = allmarked + 1;
} else {
alert("not all checked");
}
});
if (allmarked == result) {
allmarked = 0;
if ($("input[#name=7]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
if ($("input[#name=8]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
if ($("input[#name=9]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
if ($("input[#name=10]:checked").val() == "right") {
rightAnswers = rightAnswers + 1;
}
$('#info').html(rightAnswers + " / " + result);
}
}
here is my html:
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.4</h4>
<br />
<ul class="answers">
<input type="radio" name="9" value="1" id="9a" />
<label for="9a">1</label>
<br/>
<input type="radio" name="9" value="2" id="9b" />
<label for="9b">2</label>
<br/>
<input type="radio" name="9" value="3" id="9c" />
<label for="9c">3</label>
<br/>
<input type="radio" name="9" value="right" id="9d" />
<label for="9d">right</label>
<br/>
</ul>
</div>
</div>
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.5</h4>
<br />
<ul class="answers">
<input type="radio" name="10" value="1" id="10a" />
<label for="10a">1</label>
<br/>
<input type="radio" name="10" value="2" id="10b" />
<label for="10b">2</label>
<br/>
<input type="radio" name="10" value="3" id="10c" />
<label for="10c">3</label>
<br/>
<input type="radio" name="10" value="right" id="10d" />
<label for="10d">right</label>
<br/>
</ul>
</div>
</div>
i am stack to this point. it frankly seems stupid question but i am not spesialized in js. Thus, any assist would be appreciated

Because of this radio group selection, so you can only choose one; if you want to achieve that situation, you need to use checkbox to achieve;and the way to resolve ploblem is every options bind clickevent when clicking one of checkboxes,then the click func can achieve every option choosed

you can try this:
you can create an object with questions and related correct answers:
function doAjaxPost() {
var result = $('.answers').length;
var rightAnswers =0 ;
var response= "" ;
var error=false;
var correct_answers = [{question_number:1,answers_number:5},
{question_number:10,answers_number:2},
{question_number:9,answers_number:3}];
$('.answers').each(function(){
if($(this).find('input[type="radio"]:checked').length > 0){
var question_number=$(this).find('input[type="radio"]:checked').attr("name");
var answer_number =$(this).find('input[type="radio"]:checked').val();
$.each(correct_answers, function( index, value ) {
if(question_number==value.question_number && answer_number==value.answers_number)rightAnswers++;
});
}
else error=true;
});
if(error) alert("not all checked"); //display the error once
else $('#info').html(rightAnswers + " / " + result);
}
$('#check_values').click(function(){
doAjaxPost();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.4</h4> <br />
<ul class="answers">
<input type="radio" name="9" value="1" id="9a" />
<label for="9a">1</label><br/>
<input type="radio" name="9" value="2" id="9b" />
<label for="9b">2</label><br/>
<input type="radio" name="9" value="3" id="9c" />
<label for="9c">3</label><br/>
<input type="radio" name="9" value="4" id="9d" />
<label for="9d">4</label><br/>
</ul>
</div>
</div>
<div class="clearfix single_content">
<div class="tom-right">
<h4 class="tom-right">1.5</h4> <br />
<ul class="answers">
<input type="radio" name="10" value="1" id="10a" />
<label for="10a">1</label><br/>
<input type="radio" name="10" value="2" id="10b" />
<label for="10b">2</label><br/>
<input type="radio" name="10" value="3" id="10c" />
<label for="10c">3</label><br/>
<input type="radio" name="10" value="4" id="10d" />
<label for="10d">4</label><br/>
</ul>
</div>
</div>
<input type="button" id="check_values" value="Check"/>
<p id="info"></p>

Show/Hide div if all radios are checked

I have N groups of radios. I would like to show a div if all groups of radios are checked and if not all are checked, show another div:
http://jsfiddle.net/zoLwdqx6/
HTML
<p>
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Years
</p>
<br>
<p>
<input type="radio" name="year" value="1" />2015
<input type="radio" name="year" value="2" />2014
<input type="radio" name="year" value="3" />2013
</p>
<br>
<p>
<input type="radio" name="student" value="1" />Paul
<input type="radio" name="student" value="2" />Mary
<input type="radio" name="student" value="3" />Jane
</p>
<br>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>
Javascript
$('.yeschecked').hide();
$('input[type=radio]').click(function () {
$('.yeschecked').show();
});

Here is an example where 3 is not hardcoded:
$(function() {
$(".yeschecked").hide();
// count number of radio buttons grouped by name
var radioGroups = [];
$("input[type=radio]").each(function() {
if ($.inArray(this.name, radioGroups) >= 0) {
return;
}
radioGroups.push(this.name);
});
// radioGroups = ["period", "year", "student"]
$("input[type=radio]").on("change", function() {
var all = $("input[type=radio]:checked").length === radioGroups.length;
// using http://api.jquery.com/toggle/#toggle-display
$(".yeschecked").toggle(all);
$(".notchecked").toggle(all === false);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
<input type="radio" name="period" value="1">1 Year
<input type="radio" name="period" value="2">2 Years
<input type="radio" name="period" value="3">3 Years
</p>
<p>
<input type="radio" name="year" value="1">2015
<input type="radio" name="year" value="2">2014
<input type="radio" name="year" value="3">2013
</p>
<p>
<input type="radio" name="student" value="1">Paul
<input type="radio" name="student" value="2">Mary
<input type="radio" name="student" value="3">Jane
</p>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>

You can get the checked radio button count if it is three then all categrories are selected
Live Demo
$('.yeschecked').hide();
$('input[type=radio]').change(function () {
if ($('input[type=radio]:checked').length == 3) {
$('.yeschecked').show();
$('.notchecked').hide();
} else {
$('.notchecked').show();
$('.yeschecked').hide();
}
});

This can be done by length
$(document).ready(function(){
var total = totalChecked = 0;
$('input[type=radio]').on("change",function(){
totalChecked = $('input[type=radio]:checked').length;
if( totalChecked == 3 ){
$('.yeschecked').show();
$('. notchecked').hide();
} else {
$('. notchecked').show();
$('.yeschecked').hide();
}
})
});
for length refer Here
Here is a fiddle to the example

As a group only one radio will be selected, so here only 3 radios will be checked.
var totl; // track total radio groups
$(function() {
var rdos = $('input[type=radio]');
rdos.on('change', toggleDivs);
var tmp = [], nm;
rdos.each(function() {
nm = this.name.toLowerCase();
if (-1 === $.inArray(nm, tmp)) //not found in array
tmp.push(nm); // new group
});
totl = tmp.length; // get count of radio groups
toggleDivs(); //page load trigger
});
var toggleDivs = function() {
var chkd = $('input[type=radio]:checked').length;
$('div.notchecked').toggle(chkd !== totl);
$('div.yeschecked').toggle(chkd === totl);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>
<input type="radio" name="period" value="1" />1 Year
<input type="radio" name="period" value="2" />2 Years
<input type="radio" name="period" value="3" />3 Years
</p>
<p>
<input type="radio" name="year" value="1" />2015
<input type="radio" name="year" value="2" />2014
<input type="radio" name="year" value="3" />2013
</p>
<p>
<input type="radio" name="student" value="1" />Paul
<input type="radio" name="student" value="2" />Mary
<input type="radio" name="Student" value="3" />Jane
</p>
<div class="notchecked">[not all checkboxes are selected yet]</div>
<div class="yeschecked">[submit button]</div>

Validation of Multiple radiobox with different name using javascript

I have the following code. This is a quiz and i want to validate the quiz form in such a way that user have to attempt all the questions. Without answering all the questions user can not proceed to submission. A alertbox should be displayed if any question is not answered.
My code is as follows
<form method="post" action="" name="quizform" id="quizform">
<h4> 1)This is first question</h4>
a) <input type="radio" name="a1" value="1" id="1" /><label for="1">Option 1</label><br />
b) <input type="radio" name="a1" value="2" id="2" /><label for="2">Option 1</label><br />
c) <input type="radio" name="a1" value="3" id="3" /><label for="3">Option 1</label><br />
d) <input type="radio" name="a1" value="4" id="4" /><label for="4">Option 1</label><br />
<h4> 2)This is first question</h4>
a) <input type="radio" name="a2" value="1" id="5" /><label for="5">Option 1</label><br />
b) <input type="radio" name="a2" value="2" id="6" /><label for="6">Option 1</label><br />
c) <input type="radio" name="a2" value="3" id="7" /><label for="7">Option 1</label><br />
d) <input type="radio" name="a2" value="4" id="8" /><label for="8">Option 1</label><br />
<h4> 3)This is first question</h4>
a) <input type="radio" name="a3" value="1" id="9" /><label for="9">Option 1</label><br />
b) <input type="radio" name="a3" value="2" id="10" /><label for="10">Option 1</label><br />
c) <input type="radio" name="a3" value="3" id="11" /><label for="11">Option 1</label><br />
d) <input type="radio" name="a3" value="4" id="12" /><label for="12">Option 1</label><br />
<h4> 4)This is first question</h4>
a) <input type="radio" name="a4" value="1" id="13" /><label for="13">Option 1</label><br />
b) <input type="radio" name="a4" value="2" id="14" /><label for="14">Option 1</label><br />
c) <input type="radio" name="a4" value="3" id="15" /><label for="15">Option 1</label><br />
d) <input type="radio" name="a4" value="4" id="16" /><label for="16">Option 1</label><br />
<input type="submit" onclick="formButtonFever('quizform','submit')" />

hope this will help you
<script LANGUAGE="JavaScript">
function formButtonFever(form){
ErrorText= "";
if ( ( form.a1[0].checked == false ) && ( form.a1[1].checked == false ) && (
form.a1[2].checked == false )&& ( form.a1[3].checked == false ))
{
alert ( "Please answer for 1st question" );
return false;
}
if ( ( form.a2[0].checked == false ) && ( form.a2[1].checked == false ) && (
form.a2[2].checked == false )&& ( form.a2[3].checked == false ))
{
alert ( "Please answer for 2nd question" );
return false;
}
if ( ( form.a3[0].checked == false ) && ( form.a3[1].checked == false ) && (
form.a3[2].checked == false )&& ( form.a3[3].checked == false ))
{
alert ( "Please answer for 3rd question" );
return false;
}
if ( ( form.a4[0].checked == false ) && ( form.a4[1].checked == false ) && (
form.a4[2].checked == false )&& ( form.a4[3].checked == false ))
{
alert ( "Please answer for 4th question" );
return false;
}
if (ErrorText= "") { form.submit() }
}
</script>
<form method="post" action="" name="quizform" id="quizform">
//your code
<input type="submit" onclick="return formButtonFever(this.form)" />
</body>
</html>

I found this example that I think answers your question
<script type="text/javascript">
function validateRadio( obj,correct ){
var result = 0;
for(var i=0; i<obj.length; i++){
if(obj[i].checked==true && obj[i].value==correct){
result = 1;
}
}
if(!result && obj.value == correct){
result = 1;
}
return result
}
function validateSubmit( obj ){
var err = '';
if( !validateRadio( obj.a,3 ) ){ err+='\nFirst radio is wrong'; }
if( !validateRadio( obj.b,2 ) ){ err+='\nSecond radio is wrong'; }
if( err.length ){
alert('Problem:'+err);
return false;
}
else{
alert('Good Job -- Submitting');
return true;
}
}
</script>
<form onsubmit="return validateSubmit(this);" action="#">
Choose "3"
<input type="radio" name="a" value="1" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 1
<input type="radio" name="a" value="2" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 2
<input type="radio" name="a" value="3" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 3
<input type="radio" name="a" value="4" onchange="if(!validateRadio(this,3)) alert('Incorrect');"> 4
<p>Choose "2"
<input type="radio" name="b" value="1"> 1
<input type="radio" name="b" value="2"> 2
<input type="radio" name="b" value="3"> 3
<input type="radio" name="b" value="4"> 4
</p><p><input type="submit" value="Submit">
</p></form>
Reference : http://www.esqsoft.com/javascript/javascript-example-how-to-validate-radio-buttons.htm

One approach is to iterate over the form's elements collection and check that each radio button group has at least one checked:
function checkRadios(form) {
// All elements in the form
var elements = form.elements,
visited = {},
name,
node,
result = true;
// Loop over elements looking for raido button groups
for (var i=0, iLen=elements.length; i<iLen; i++) {
node = elements[i];
name = node.name;
// Store whether one radio in the group is checked
if (node.type == 'radio') {
visited[name] = node.checked || !!visited[name];
}
}
// Deal with unchecked radios
for (name in visited) {
if (visited.hasOwnProperty(name) && !visited[name]) {
console.log(name + ' has not been checked');
result = false;
}
}
// Return false if one group not checked
return result;
}
You should include a reset button in the form too:
<form onsubmit="return checkRadios(this);">
Choose "3"
<input type="radio" name="a" value="1"> 1
<input type="radio" name="a" value="2"> 2
<input type="radio" name="a" value="3"> 3
<input type="radio" name="a" value="4"> 4
<br>
Choose "2"
<input type="radio" name="b" value="1"> 1
<input type="radio" name="b" value="2"> 2
<input type="radio" name="b" value="3"> 3
<input type="radio" name="b" value="4"> 4
<br>
<input type="submit" value="Submit"><input type="reset">
</form>

Another answer. At first you should provide class for each radio button, name a1 have class a1, name a2 have class a2 and so on...Then
try like this..
$("input[type='submit']").click(function()
{ var flag=0;
var a1 = $('.a1').is(':checked');
var a2 = $('.a2').is(':checked');
var a3 = $('.a3').is(':checked');
var a4 = $('.a4').is(':checked');
if(a1 ==false||a2==false||a3==false||a4==false)
{
flag =1;
}
if(flag==1)
{
alert("plaese answer all questions!");
return false;
}
else
{
alert("success");
}
});

Traverse object and return matching key / values

I have a series of objects containing product information that I need to use to filter the available product options. (i.e. Customer selects radio button with value option id 25, I need to filter the other two options based on what's available for id 25 and then get the value for that three part combination from configurations (25 / 1 / 13) and find that combination in siblings to return the sku value (25 / 1/ 13 = 1761).
I've been successful at getting the keys and values but not matching. I'm a total n00b with javascript (most of my experience is just animating things with jQuery) so I'm not sure that I have written anything worthwhile so far.
Here's what I get from the encoded JSON (trimmed b/c data is massive so formatting might not be exact). I don't have any control over formatting and structure of the JSON.
var configurations = {
"lens_types":{
"25":{
"1":1,
"2":2,
"4":4,
"3":3}},
"lenses":{
"25":{
"1":{
"2":2,
"4":4,
"5":5,
"6":6,
"9":9,
"13":13},
"2":{
"4":4,
"5":5,
"6":6,
"13":13}}}
var siblings = {
"25":{
"1":{
"2":1744,
"4":1745,
"5":1747},
"6":1749,
"9":1752,
"13":1761},
"2":{
"4":1746,
"5":1748,
"6":1750,
"13":1762},
"4":{
"1":1753,
"3":1756,
"8":1759},
"3":{
"2":1754,
"3":1755,
"8":1757,
"9":1758,
"12":1760}}}
This is the generic structure of the product form:
<form method="post" action="" name="product_details">
<div id="frame_style">
<input type="radio" name="frame_style" value="1" />
<input type="radio" name="frame_style" value="3" />
<input type="radio" name="frame_style" value="11" />
<input type="radio" name="frame_style" value="24" />
<input type="radio" name="frame_style" value="25" />
<input type="radio" name="frame_style" value="27" />
<input type="radio" name="frame_style" value="2" />
<input type="radio" name="frame_style" value="8" />
<input type="radio" name="frame_style" value="45" />
<input type="radio" name="frame_style" value="77" />
<input type="radio" name="frame_style" value="89" />
<input type="radio" name="frame_style" value="13" />
</div>
<div id="lens_type">
<input type="radio" name="lens_type" value="1" />
<input type="radio" name="lens_type" value="2" />
<input type="radio" name="lens_type" value="3" />
<input type="radio" name="lens_type" value="4" />
</div>
<div id="lens_style">
<input type="radio" name="lens_style" value="1" />
<input type="radio" name="lens_style" value="2" />
<input type="radio" name="lens_style" value="3" />
<input type="radio" name="lens_style" value="4" />
<input type="radio" name="lens_style" value="5" />
<input type="radio" name="lens_style" value="8" />
<input type="radio" name="lens_style" value="9" />
<input type="radio" name="lens_style" value="12" />
</div>
</form>
Any ideas? Thanks!!
Edit
Here's the full object for both:
var configurations = {"lens_types":{"25":{"1":1,"2":2,"4":4,"3":3},"1":{"1":1,"2":2,"4":4,"3":3},"15":{"1":1,"2":2,"3":3},"26":{"1":1,"2":2,"3":3},"24":{"1":1,"2":2,"4":4,"3":3},"27":{"1":1,"2":2,"4":4,"3":3},"11":{"1":1,"2":2,"4":4,"3":3},"3":{"1":1,"2":2,"4":4,"3":3}}, "lenses":{"25":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"1":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"15":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"26":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"3":{"2":2,"3":3,"8":8,"9":9}},"24":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"27":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"11":{"1":{"2":2,"4":4,"5":5,"6":6,"9":9,"13":13},"2":{"4":4,"5":5,"6":6,"13":13},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}},"3":{"1":{"2":2,"4":4,"5":5,"9":9},"2":{"4":4,"5":5,"6":6},"4":{"1":1,"3":3,"8":8},"3":{"2":2,"3":3,"8":8,"9":9,"12":12}}}}
var siblings = {"25":{"1":{"2":1744,"4":1745,"5":1747,"6":1749,"9":1752,"13":1761},"2":{"4":1746,"5":1748,"6":1750,"13":1762},"4":{"1":1753,"3":1756,"8":1759},"3":{"2":1754,"3":1755,"8":1757,"9":1758,"12":1760}},"1":{"1":{"2":1769,"4":1770,"5":1772,"6":1774,"9":1777,"13":1786},"2":{"4":1771,"5":1773,"6":1775,"13":1787},"4":{"1":1778,"3":1781,"8":1784},"3":{"2":1779,"3":1780,"8":1782,"9":1783,"12":1785}},"15":{"1":{"2":1794,"4":1795,"5":1797,"6":1799,"9":1802,"13":1807},"2":{"4":1796,"5":1798,"6":1800,"13":1808},"3":{"2":1803,"3":1804,"8":1805,"9":1806}},"26":{"1":{"2":1809,"4":1810,"5":1812,"6":1814,"9":1817,"13":1822},"2":{"4":1811,"5":1813,"6":1815,"13":1823},"3":{"2":1818,"3":1819,"8":1820,"9":1821}},"24":{"1":{"2":1824,"4":1825,"5":1827,"6":1829,"9":1832,"13":1841},"2":{"4":1826,"5":1828,"6":1830,"13":1842},"4":{"1":1833,"3":1836,"8":1839},"3":{"2":1834,"3":1835,"8":1837,"9":1838,"12":1840}},"27":{"1":{"2":1843,"4":1844,"5":1846,"6":1848,"9":1851,"13":1860},"2":{"4":1845,"5":1847,"6":1849,"13":1861},"4":{"1":1852,"3":1855,"8":1858},"3":{"2":1853,"3":1854,"8":1856,"9":1857,"12":1859}},"11":{"1":{"2":1862,"4":1863,"5":1865,"6":1867,"9":1870,"13":1879},"2":{"4":1864,"5":1866,"6":1868,"13":1880},"4":{"1":1871,"3":1874,"8":1877},"3":{"2":1872,"3":1873,"8":1875,"9":1876,"12":1878}},"3":{"1":{"2":1881,"4":1882,"5":1884,"9":1888},"2":{"4":1883,"5":1885,"6":1886},"4":{"1":1889,"3":1892,"8":1895},"3":{"2":1890,"3":1891,"8":1893,"9":1894,"12":1896}}}

You could do something like:
$('#frame_style input:radio').click(function(){
var val = $(this).val();
for ( var ind in configurations['lenses'][val]){
var input = '<input type="radio" name="lens_type" value="'+ind+'" >'+ind;
$('#lens_type').append(input);
}
});
$('#lens_type input:radio').live('click', function(){
var frame = $('#frame_style input:radio:checked').val();
var val = $(this).val();
for ( var ind in configurations['lenses'][frame][val]){
var input = '<input type="radio" name="lens_style" value="'+ind+'" >'+ind;
$('#lens_style').append(input);
}
});
$('#lens_style input:radio').live('click', function(){
var frame = $('#frame_style input:radio:checked').val();
var type = $('#lens_type input:radio:checked').val();
var style = $(this).val()
alert('Sku is:'+siblings[frame][type][style]);
});
the idea is to create the radios after the user select the first level. Of course this is very basic, you can try this fiddle: http://jsfiddle.net/LL3SM/ and choos 25, 1, 2 you will get an alert with the sku