How to set checked radio button using name and attr in jquery?

How to set checked radio button using name and attr in jquery? - javascript

I am working with some radio input and want to set them checked while edit function. I used ajax response. I have to set them checked.
The code sample is following:
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" />
Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" />
Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
I get from ajax response the following:
var ans_name = ans1,ans2,ans3;
var str = ans_c,ans_a,ans_d;
That means i have to set checked the 3rd radio input of gruop 1 and so on.
How can i set checked the corresponding radio button by jquery?

Select based on attribute equals selector and update the checked property.
var ans_name = 'ans1,ans2,ans3';
var str = 'ans_c,ans_a,ans_d';
// split the string into array by ,
var names = ans_name.split(','),
val = str.split(',');
// iterate over names array
names.forEach(function(v, i) {
// generate the selector and get jQuery object using that
$('[name="' + v + '"][str="' + val[i] + '"]')
// update the property
.prop('checked', true);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" /> Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" /> Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>
Or generate a single selector using Array#map and Array#join methods.
var ans_name = 'ans1,ans2,ans3';
var str = 'ans_c,ans_a,ans_d';
var names = ans_name.split(','),
val = str.split(',');
$(names.map(function(v, i) {
// geneate the selector
return '[name="' + v + '"][str="' + val[i] + '"]';
})
// join the selectors
.join(','))
// update the property
.prop('checked', true)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" /> Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" /> Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />
</form>

Explode names and value with data what you get from response and check through loop and you will get radio checked with the correct answer.
var ans_name = "ans1,ans2,ans3";
var str = "ans_c,ans_a,ans_d";
var checkbox_names = ans_name.split(",");
var values = str.split(",");
$(checkbox_names).each(function(index, value){
$("[name='"+value+"'][str='"+values[index]+"']").prop("checked",true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
Group 1:
<input type="radio" name="ans1" str="ans_a" value="1" />
<input type="radio" name="ans1" str="ans_b" value="2" />
<input type="radio" name="ans1" str="ans_c" value="3" />
<input type="radio" name="ans1" str="ans_d" value="4" />
Group 2:
<input type="radio" name="ans2" str="ans_a" value="1" />
<input type="radio" name="ans2" str="ans_b" value="2" />
<input type="radio" name="ans2" str="ans_c" value="3" />
<input type="radio" name="ans2" str="ans_d" value="4" />
Group 3:
<input type="radio" name="ans3" str="ans_a" value="1" />
<input type="radio" name="ans3" str="ans_b" value="2" />
<input type="radio" name="ans3" str="ans_c" value="3" />
<input type="radio" name="ans3" str="ans_d" value="4" />

Related

How to checked and unchecked values of checkboxes with same name two different places using jquery?

I have checkboxes with same name two different places, like below
One place
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
Second place
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
updated my question, plz check once, actually one place first checkbox value same and 5th checkbox value same, so whichever checkbox select that checkbox only select, in this case both value 1 checked.
what i want is , if i select value 1 of one place automatically it selects second place value 1 and also seletc second place value 1 automatically it will select first place value 1 checkbox select using jquery , plz help me.
var vtypeid = [];
$.each($("input[name='vtypeid']:checked"), function(){
vtypeid.push($(this).val());
});
any one using this code how to do.

Selecting based on name="checkbox-group" in case there are other checkboxes on the page that aren't part of this functionality:
$(document).ready(function() {
var cbs = $('input[name="checkbox-group"]').click(function() {
cbs.filter(($(this).is(".place1") ? ".place2" : ".place1")
+ '[value="' + this.value + '"]')
.prop('checked', this.checked)
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
First group:
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
<br><br>
Second group:
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />
Note: for checkboxes I recommend the click event rather than the change event, because the latter behaves a bit weirdly for keyboard input in some older browsers.

You can bind change event to class place1 and place2 and using value attribute you can check and uncheck the checkboxes in different places.
$(".place1").change(function () {
$("input[value=" + $(this).attr("value") + "].place2").prop("checked", $(this).prop("checked"));
});
$(".place2").change(function () {
$("input[value=" + $(this).attr("value") + "].place1").prop("checked", $(this).prop("checked"));
});

Check below snippet.
$(document).ready(function(){
$("input.place1[name=checkbox-group]").on('click', function(){
if($(this).prop('checked')){
$("input.place2[value="+$(this).val()+"]").prop('checked', true);
}
else{
$("input.place2[value="+$(this).val()+"]").prop('checked', false);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div> 1st
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
</div>
<div> 2nd
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />
</div>

There are different ways to do. it is one of the way
$('[name = checkbox-group]').on('click', function() {
var val = $(this).val();
$('[name = checkbox-group][value='+val+']').prop('checked', $(this).is(':checked'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
First
<input name="checkbox-group" class="place1" value="1" type="checkbox" />
<input name="checkbox-group" class="place1" value="2" type="checkbox" />
<input name="checkbox-group" class="place1" value="3" type="checkbox" />
<input name="checkbox-group" class="place1" value="4" type="checkbox" />
<input name="checkbox-group" class="place1" value="5" type="checkbox" />
<br />
second
<input name="checkbox-group" class="place2" value="1" type="checkbox" />
<input name="checkbox-group" class="place2" value="2" type="checkbox" />
<input name="checkbox-group" class="place2" value="3" type="checkbox" />
<input name="checkbox-group" class="place2" value="4" type="checkbox" />
<input name="checkbox-group" class="place2" value="5" type="checkbox" />

you need to put this code its working
$(document).ready(function() {
$('input[type="checkbox"][name=checkbox-group]').change(function () {
$("input[name=checkbox-group][value='" + $(this).val() + "']").prop('checked', $(this).is(':checked'))
});
});

give unique id do like this
<input name="checkbox-group" id="chk1" class="place1" value="1" type="checkbox" onclick="document.getElementById('chk2').checked = this.checked;" />
<input name="checkbox-group_1" id="chk2" class="place2" value="1" type="checkbox" onclick="document.getElementById('chk1').checked = this.checked;" />

How do I set a group of checkboxes using values?

So I have a group of checkboxes, for example:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />
Now I have an array of values:
var values = ["2", "4", "7", "8"];
Now how do I end up with my group of checkboxes to look like this:
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" checked="checked" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" checked="checked" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" checked="checked" />
<input type="checkbox" id="cbl8" name="cbl" value="8" checked="checked" />
Will I have to use two for-loops to do this? Is there a way in plain javascript or jquery that doesn't involve having to loop twice?

API docs demo
var values = ["2", "4", "7", "8"];
$('input[name="cbl"]').val(values)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="cbl1" name="cbl" value="1" />
<input type="checkbox" id="cbl2" name="cbl" value="2" />
<input type="checkbox" id="cbl3" name="cbl" value="3" />
<input type="checkbox" id="cbl4" name="cbl" value="4" />
<input type="checkbox" id="cbl5" name="cbl" value="5" />
<input type="checkbox" id="cbl6" name="cbl" value="6" />
<input type="checkbox" id="cbl7" name="cbl" value="7" />
<input type="checkbox" id="cbl8" name="cbl" value="8" />

Create a selector from the array, and check them all
$( '#cbl' + values.join(', #cbl') ).prop('checked', true);
FIDDLE
This is using the ID's, as that's a better way to select the elements than the values, if you still want to use the values, you can use the same concept
$( '[value="' + values.join('"], [value="') + '"]').prop('checked', true);
FIDDLE
or you can filter
$('input[type="checkbox"]').filter(function() {
return $.inArray(this.value, values) != -1;
}).prop('checked', true);

how do I select a parameter a Javascript selector?

Hi there (I'm a complete JS newbie so please no bullying)
I'm trying to pass formID inside my score variable but I don't think I'm getting my selector right, can anyone tell me what I'm doing wrong ?
Edit: Sorry everyone, I'm getting tired. My issue: I cannot properly select the value of my score var.
JS
function addScore(formId) {
var show_id = $('#show_id-'+formId).val();
var user_id = $('#user_id-'+formId).val();
var score = $('input[value="tvshowrating' + formID +'"]').val();
HTML
<form id="40">
<div class="your-score">
<div class="">Your Score</div> <div id="flash"></div>
<input class="hover-star" type="radio" name="tvshowrating40" value="1" title="1" />
<input class="hover-star" type="radio" name="tvshowrating40" value="2" title="2" />
<input class="hover-star" type="radio" name="tvshowrating40" value="3" title="3" />
<input class="hover-star" type="radio" name="tvshowrating40" value="4" title="4" />
<input class="hover-star" type="radio" name="tvshowrating40" value="5" title="5" />
<input class="hover-star" type="radio" name="tvshowrating40" value="6" title="6" />
<input class="hover-star" type="radio" name="tvshowrating40" value="7" title="7" />
<input class="hover-star" type="radio" name="tvshowrating40" value="8" title="8" />
<input class="hover-star" type="radio" name="tvshowrating40" value="9" title="9" />
<input class="hover-star" type="radio" name="tvshowrating40" value="10" title="10" />
<input type="hidden" id="show_id-40" value="40" />
<input type="hidden" id="user_id-40" value="2" />
<span id="hover-test" style="margin:0 0 0 20px;"></span>
<input id="submitscore" type="submit" value="Submit scores!" onclick="addScore(40);" />
</div>
</form>
</div>

You probably want the checked value:
$('input[name="tvshowrating' + formID +'"]:checked').val()
Here is another question that answers your problem:
Get Value of Radio button group
or
How can I know which radio button is selected via jQuery?

You're selecting <input>s by value.
You probably want input[name=....

JavaScript to create a global radio button for all subsequent radio buttons?

I have this set of labels and radio buttons that look like this:
Entertainment: <input type="radio" name="entertainment" id="entertainment" value="0" checked/>
<input type="radio" name="entertainment" id="entertainment" value="1" />
<input type="radio" name="entertainment" id="entertainment" value="2" /><br />
Radio: <input type="radio" name="radio" id="radio" value="0" checked/>
<input type="radio" name="radio" id="radio" value="1" />
<input type="radio" name="radio" id="radio" value="2" /><br />
Dancing: <input type="radio" name="dancing" id="dancing" value="0" checked/>
<input type="radio" name="dancing" id="dancing" value="1" />
<input type="radio" name="dancing" id="dancing" value="2" /><br />
Music: <input type="radio" name="music" id="music" value="0" checked/>
<input type="radio" name="music" id="music" value="1" />
<input type="radio" name="music" id="music" value="2" /><br />
Television: <input type="radio" name="tv" id="tv" value="0" checked/>
<input type="radio" name="tv" id="tv" value="1" />
<input type="radio" name="tv" id="tv" value="2" /><br />
Film: <input type="radio" name="film" id="film" value="0" checked/>
<input type="radio" name="film" id="film" value="1" />
<input type="radio" name="film" id="film" value="2" /><br />
Theatre: <input type="radio" name="theatre" id="theatre" value="0" checked/>
<input type="radio" name="theatre" id="theatre" value="1" />
<input type="radio" name="theatre" id="theatre" value="2" />
The idea is that the three 'Entertainment' radio buttons at the top control all the radio buttons below. A 'global switch', if you will, to save people time. Does anyone know the necessary JavaScript/jQuery to accomplish this? I can't find a correct example online.

$(':radio[name=entertainment]').change(function() {
$(this).nextAll(':radio[value="'+ this.value +'"]').prop('checked', true);
$(this).nextAll(':radio[value!="'+ this.value +'"]').prop('checked', false);
});
Working sample
Note
ids should be unique.

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

Develop Reference

JavaScript is the programming language of the Web.

How to set checked radio button using name and attr in jquery? - javascript

Related

How to checked and unchecked values of checkboxes with same name two different places using jquery?

How do I set a group of checkboxes using values?

how do I select a parameter a Javascript selector?

JavaScript to create a global radio button for all subsequent radio buttons?

Traverse object and return matching key / values

Categories

Resources