Getting Variables from multiple Radio boxes and revealing content using jquery

OK, I'm pretty novice on the whole jquery front, some cut & paste then tweek but I'm getting stuck, perhaps I'm not searching for the right things, but here goes...

I have a form with 2 radio box groups of 3 (currently Number Selection and Alpha Selection). What I'm attempting to do is have a user select one choice for each set, and return the relevent result in a .

So in total there will be 9 possible combinations, (one AY, one BEE, one CEE, two Ay.... and so on).

I assume I need a number of things:

1. To find the values of the two radio buttons selected
2. Process this value
3. Display the correct content regarding the value
4. Allow users to change their choice, show and hide each as required (I'd like this to happen as soon as two options are selected if possible, but a 'submit' btton would be OK)

Here is what I have:

HTML Form

<p>Number Selection</p>

<p> 
<input type="radio" name="r1" value="one"> one <br />
<input type="radio" name="r1" value="two"> two <br />
<input type="radio" name="r1" value="three"> three <br />
</p>

<p>Alpha Selection</p>

<p>
<input type="radio" name="r2" value="AY"> AY <br />
<input type="radio" name="r2" value="BEE"> BEE <br />
<input type="radio" name="r2" value="CEE"> CEE <br />

</p>

</form>

HTML DIV's

<div class="oneAY" style="display:none;">one AY</div>
<div class="oneBEE" style="display:none;">one BEE</div>
<div class="oneCEE" style="display:none;">one CEE</div>

<div class="twoAY" style="display:none;">two AY</div>
<div class="twoBEE" style="display:none;">two BEE</div>
<div class="twoCEE" style="display:none;">two CEE</div>

<div class="threeAY" style="display:none;">three AY</div>
<div class="threeBEE" style="display:none;">three BEE</div>
<div class="threeCEE" style="display:none;">three CEE</div>

SCRIPT (Just defining each result, might be way off the mark)

<script type=”"text/javascript>


            {
                case "0":
                    document.getElementById("oneAY").style.display="block";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "1":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="block";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "2":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="block";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.displ开发者_开发问答ay="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "3":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="block";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "4":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="block";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "5":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="block";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "6":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="block";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "7":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="block";
                    document.getElementById("threeCEE").style.display="none";
                break;
                case "8":
                    document.getElementById("oneAY").style.display="none";
                    document.getElementById("oneBEE").style.display="none";
                    document.getElementById("oneCEE").style.display="none";
                    document.getElementById("twoAY").style.display="none";
                    document.getElementById("twoBEE").style.display="none";
                    document.getElementById("twoCEE").style.display="none";
                    document.getElementById("threeAY").style.display="none";
                    document.getElementById("threeBEE").style.display="none";
                    document.getElementById("threeCEE").style.display="block";
                break;


</script>

---

OK, first I would give all the divs a common class, let's say content:

<div class="oneAY content" style="display:none;">one AY</div>
...

<div class="twoAY content" style="display:none;">two AY</div>
...

Then hiding and showing them is fairly simple. You have to register an event handler to the change event of the radio buttons, get the value of the selected buttons and show the corresponding div:

$('input[name="r1"], input[name="r2"]').change(function() {
    var r1val = $('input[name="r1"]:checked').val(),
        r2val = $('input[name="r1"]:checked').val();

    if(r1val && r2val) {
        $('.content').hide();
        $('.' + r1val + r2val).show();
    }
});

(Note: this is not the best code either, but it is only used to demonstrate how it could be done. Ideally you would cache references to elements.)

DEMO

I suggest to read

• ... the MDC JavaScript Guide to learn about JavaScript
• ... about DOM (as reference)
• ... the articles on quirksmode.org about the various types of event handling
• ... you read some jQuery tutorials to learn about jQuery

---

Here you go:

var $radioList = $('input[type="radio"]');
$('input[type="radio"]').change(function() {
    var $r1 = $radioList.filter('[name="r1"]:checked');
    var $r2 = $radioList.filter('[name="r2"]:checked');
    if($r1.length > 0 && $r2.length > 0) {
        $('div').hide();
        $('.' + $r1.val() + $r2.val()).show();
    }
});

And here is jsFiddle test case