I am currently facing a development challenge with my jQuery script. Despite searching for solutions to repurpose, I have been unable to find exactly what I need. I attempted to write my own solution, but as a novice, I am struggling to get it to function correctly.
My goal is to have 2 sets of radio buttons (3 in the first group, 2 in the second) that will display one of six div tags based on the selection of both groups of radio buttons.
Currently, I have only written enough script for the clinical options - either sales or support.
For the HTML code:
<div class="input-quest">Question 1</div>
<div id="optSelectBU">
<input type="radio" name="button1" value="clinical" />
<label>Clinical</label>
<input type="radio" name="button1" value="financial" />
<label>Financial</label>
<input type="radio" name="button1" value="pharmacy" />
<label>Pharmacy</label>
</div>
<div class="input-quest">Question 2</div>
<div id="optSelectService">
<input type="radio" name="button2" value="support" />
<label>Support</label>
<input type="radio" name="button2" value="sales" />
<label>Sales</label>
</div>
<div id="Clinical-Support">
<div class="block">
<div class="input-quest">Div 1</div>
</div>
</div>
...
As for the script:
$(document).ready(function () {
// Initial hide
$("#Clinical-Support").hide();
...
// Change event handlers
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "sales") {
...
} else {
...
}
});
$("#optSelectBU").change(function () {
if ($('input[name=button1]').val() == "clinical" && $('input[name=button2]').val() == "support") {
...
} else {
...
}
});
});
You can also view the fiddle link: http://jsfiddle.net/schoward30506/LV5nQ/3/