I have 3 radio buttons labeled "Squat", "Benchpress" and "Deadlift", each of which shows and hides the associated drop down menu (I have 3 drop-down lists, but only one is shown each time containing different data)
Although now I have added 3 more radio cuts, called "Primary", "Secondary" and "Help". Now, if the primary and secondary radio objects are selected, I do not want any drop-down list to be visible at all, only if Secondary is selected. And when Secondary is selected, it should be only one visible, as it is now! I just can't get it to work.
I turn on this fiddle so you can visualize and see what I mean!
$(function() {
$("#datepicker").datepicker({ dateFormat: "yy-mm/dd" }).val()
});
$(function() {
$("input[type='radio']").change(function() {
if ($(this).val() == 1 && this.checked) {
$("#exerVariNameS").show();
$("#exerVariNameB").hide();
$("#exerVariNameD").hide();
} else if ($(this).val() == 2 && this.checked){
$("#exerVariNameS").hide();
$("#exerVariNameB").show();
$("#exerVariNameD").hide();
} else if ($(this).val() == 3 && this.checked) {
$("#exerVariNameS").hide();
$("#exerVariNameB").hide();
$("#exerVariNameD").show();
}
});
$('input[type=radio]').each(function() {
var state = JSON.parse( localStorage.getItem('radio_' + this.id) );
if (state) this.checked = state.checked;
$(this).trigger('change');
});
$(window).bind('unload', function() {
$('input[type=radio]').each(function() {
localStorage.setItem('radio_' + this.id, JSON.stringify({checked: this.checked}));
});
});
});
https://jsfiddle.net/o7m0d4uu/4/
, , !