var base = {
productFilterSetup: function() {
$('.productFilter').each(
function() {
var tmp = new base.filterGroup(this);
tmp.setup();
});
},
filterGroup: function(filter_group) {
var me = this;
me.target_element = filter_group;
me.active_element_index = 0;
me.setup = function() {
$(filter_group).find('input[type=radio]').bind('click', function() {
me.update(this);
});
};
me.update = function(target_radio) {
var fieldsets = $(me.target_element).find('fieldset'),
len = fieldsets.length,
i = 0,
j = 0,
radios,
radios_len,
options = [],
options_buffer = '',
num_of_steps = 0;
for (i = 1; i <= num_of_steps + 1; i += 1) {
if ($('fieldset.step' + i).length > 0) {
num_of_steps += 1;
}
}
for (i = 0; i < num_of_steps; i += 1) {
if ($(target_radio).parents('fieldset.step' + (i + 1)).length > 0) {
for (j = i; j < num_of_steps; j += 1) {
$('fieldset.step' + (j + 2) + ' input[type=radio]').attr('checked', false);
}
}
}
for (i = 0; i < len; i += 1) {
radios = $(fieldsets[i]).find('input[type=radio]');
radios_len = radios.length;
for (j = 0; j < radios_len; j += 1) {
if ($(radios[j]).is(':checked')) {
options.push(j + 1);
}
}
}
fieldsets.addClass('hide');
$('fieldset.option0').removeClass('hide');
for (i = 0; i < options.length; i += 1) {
options_buffer += options[i];
$('fieldset.option' + options_buffer).removeClass('hide');
}
};
}
};
$(
function() {
base.productFilterSetup();
});
<form action="#" id="unique_id" class="productFilter">
<fieldset class="step1 option0">
<legend>Lorizzle ipsizzle (Q1)</legend>
<p>
<input id="question_1" name="group_1" type="radio" />
<label for="question_1">Yes!</label>
</p>
<p>
<input id="question_2" name="group_1" type="radio"/>
<label for="question_2">No.</label>
</p>
</fieldset>
<fieldset class="hide step2 option1">
<legend>Sizzle pizzle (Branch 1)</legend>
<p>
<input id="question_1_1" name="group_2" type="radio" />
<label for="question_1_1">True</label>
</p>
<p>
<input id="question_1_2" name="group_2" type="radio" />
<label for="question_1_2">False</label>
</p>
</fieldset>
<fieldset class="hide step2 option2">
<legend>Grizzle fipdizzle (Branch 2)</legend>
<p>
<input id="question_2_1" name="group_3" type="radio" />
<label for="question_2_1">True</label>
</p>
<p>
<input id="question_2_2" name="group_3" type="radio" />
<label for="question_2_2">False</label>
</p>
</fieldset>
<fieldset class="hide step3 option11">
<legend>Suscipizzle lorizzle (Branch 1 1)</legend>
<p>
<input id="question_1_1_1" name="group_4" type="radio"/>
<label for="question_1_1_1">Yea</label>
</p>
<p>
<input id="question_1_1_2" name="group_4" type="radio"/>
<label for="question_1_1_2">Nay</label>
</p>
</fieldset>
<fieldset class="hide step3 option12">
<legend>Suscipizzle izzle (Branch 1 2)</legend>
<p>
<input id="question_1_2_1" name="group_5" type="radio"/>
<label for="question_1_2_1">Yea</label>
</p>
<p>
<input id="question_1_2_2" name="group_5" type="radio" />
<label for="question_1_2_2">Nay</label>
</p>
</fieldset>
<fieldset class="hide step3 option21">
<legend>Macdizzle ma nizzle (Branch 2 1)</legend>
<p>
<input id="question_2_1_1" name="group_6" type="radio" />
<label for="question_2_1_1">Yea</label>
</p>
<p>
<input id="question_2_1_2" name="group_6" type="radio" />
<label for="question_2_1_2">Nay</label>
</p>
</fieldset>
<fieldset class="hide step3 option22">
<legend>Shizzle bizzle (Branch 2 2)</legend>
<p>
<input id="question_2_2_1" name="group_7" type="radio" />
<label for="question_2_2_1">Yea</label>
</p>
<p>
<input id="question_2_2_2" name="group_7" type="radio" />
<label for="question_2_2_2">Nay</label>
</p>
</fieldset>
</form>
<p>Lorizzle ipsizzle doggy sit amizzle, shizzlin dizzle adipiscing nizzle. Nullizzle sapien velizzle, nizzle break yo neck, yall, suscipizzle da bomb, dizzle vizzle, sheezy.</p>
<a title="A button, fo shizzle." href="#" class="buttonGreen"><span>Click me. Do it. Now!</span></a>
fieldset {margin:10px 0;}
.hide {display:none;}