Radio buttons - show DIV based on checked button with jQuery

Question

Hello

I am trying to achieve the following - from a list of questions each with 4 multiple choice answers I need to show whether the user has answered correctly (immediately) by showing whether it was correct or incorrect once a radio button has been pressed.

Here is an example of a question:

<ol>
<li id="question_one">
<p><input type="radio" name="question_1" value="answer_1" />Corn</p>
<p><input type="radio" name="question_1" value="answer_2" />Cotton</p>
<p><input type="radio" name="question_1" value="answer_3" />Rice</p>
<p><input type="radio" name="question_1" value="answer_4" />Soybeans</p>
</li>
</ol>

<div id="q1_answer_1" class="show_answer">Corn 11.0%</div>
<div id="q1_answer_2" class="show_answer">Cotton 2.5%</div>
<div id="q1_answer_3" class="show_answer">Rice 11.0%</div>
<div id="q1_answer_4" class="show_answer">Soybeans 7.0%</div>

And the resulting jquery:

$("#question_one input:radio:eq(answer_1)").click(function(){
$("#q1_answer_1").show(100);
});

$("#question_one input:radio:eq(answer_2)").click(function(){
$("#q1_answer_2").show(100);
});

$("#question_one input:radio:eq(answer_3)").click(function(){
$("#q1_answer_3").show(100);
});

$("#question_one input:radio:eq(answer_4)").click(function(){
$("#q1_answer_4").show(100);
});

I believe this won't work because eq() will only work for numeric values? Is there an equivalent of eq() that will work for input values? Or any other suggestions as to how the above might work?

Many thanks

Answer 1

Try using the pseudo-selector :checked, like this: $("#question_one input:checked")....

Answer 2

If you want it to be a bit more generic, you can do it based on the value, like this:

$("#question_one :radio[name=question_1]").change(function() {
    $("div.show_answer").hide();
    $("#q1_" + $(this).val()).show(100);
});​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

You can give it a try here, or if you need it more generic, say you have multiple questions, just wrap each of the blocks of HTML above in a container, for example <div class="question"></div> then you can do something like this:

$(".question :radio[name=question_1]").change(function() {
    $(this).closest(".question").find("div.show_answer").hide()
           .filter("[id$='" + $(this).val() +"']").show(100);
});​

You can test that version here, it'll work for multiple questions without duplicating your code for each.

---

For comments: To kill it after the first click you have a few options, you could disable them by adding this to the handler (test here):

$(this).closest('li').find(':radio').attr('disabled', true);

Or if you want to enable change but not show the answer again, just unbind them (test here):

$(this).closest('li').find(':radio').unbind('change');