How can i apply CSS with Jquery at parent div on user selection?

Question

How can i use Jquery to add a class on user selection?

My Aspx markup is as follows.

     <div id="Answer" class="Ans">
           <div id ="Left"> 
           <asp:RadioButton ID="rdAnsBool1" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans1") %>' />
           <asp:RadioButton ID="rdAnsBool2" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans2") %>' />
           <asp:RadioButton ID="rdAnsBool3" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans3") %>' />
           <asp:RadioButton ID="rdAnsBool4" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans4") %>' />
           <asp:RadioButton ID="rdAnsBool5" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans5") %>' />
           <asp:RadioButton ID="rdAnsBool6" runat="server" Text = '<%# DataBinder.Eval(Container.DataItem, "Ans6") %>' />
           <asp:HiddenField ID="HiddenField1" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans1Bool") %>'/>
           <asp:HiddenField ID="HiddenField2" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans2Bool") %>'/>
           <asp:HiddenField ID="HiddenField3" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans3Bool") %>'/>
           <asp:HiddenField ID="HiddenField4" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans4Bool") %>'/>
           <asp:HiddenField ID="HiddenField5" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans5Bool") %>'/>
           <asp:HiddenField ID="HiddenField6" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans6Bool") %>'/>
           </div>
        </div>

The visitor may select the answer by choosing the "winning question" radiobutton

The HiddenFields contain true or false

So if the user selects the rdAnsBool1 and the value of the HiddenField1 is "True", the JQuery should add a "correct" CSS class to the parent div with ID = Answer

If the user selects the rdAnsBool1 and the value of the HiddenField1 is "False", the JQuery should add a "wrong" CSS class to the parent div with ID = Answer

In your answers please keep in mind that the following markup is rendered within a list view

And here is the JSFiddle link

http://jsfiddle.net/VTevz/

Answer 1

Just as an FYI, hidden field values are visible with HTML inspectors so not the best place to store secret answers.

Assuming your ID's and names will stay the same (not a very good idea but nonetheless)...

This works: http://jsfiddle.net/VTevz/6/

$(function() {
    $('input[name$="answers"]').change(function() {
        // clear all the previous classes
        $('input[name$="answers"]').parent().removeClass('correct').removeClass('wrong');

        // get the index of the selected answer
        var i = $('input[name$="answers"]').index(this);

        // get the value of the corresponding correct answer
        var answer = $('input[type="hidden"]:eq(' + i + ')').val();

        // check if it's true and add the appropriate class
        if (answer == 'True') $(this).parent().addClass('correct');
        else $(this).parent().addClass('wrong');
    });
});