Question

My Aspx markup is as follows.
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

<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:HiddenField ID="HiddenField1" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans1Bool") %>'/>
   <asp:HiddenField ID="HiddenField2" runat="server" Value = '<%# DataBinder.Eval(Container.DataItem, "Ans2Bool") %>'/>
   </div>
</div>

How can this be with JQuery?

Update.
The Answer div is located within a Listview. This is the reason i would like to paint the parent div.

Just another Update
I am afraid of JQuery…

The markup has changed to the following… for this reason i offer 200 boundy for the winning solution.

<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>

And here is the JsFiddle part

http://jsfiddle.net/VTevz/

This thing is driving me nuts

Answer 1

// get a reference to radio button and attach change handler
$('input[id*="rdAnsBool"]').change(function(){
     var container = $(this).closest('div.Ans'),
         questionid = $(this).attr('id'),
         index = questionid[questionid.indexOf('rdAnsBool') + 1];

     // test for condition and set classes accordingly ...
     if($(this).val() == $(this).parent()
                                .find('input[id*="HiddenField' + index + '"]').val()) {
          container.addClass('correct').removeClass('wrong');
          return;
     }

     container.addClass('wrong').removeClass('correct');
});

Update (Make sure you post the HTML markup and not ASP markup when working in the browser context):

http://jsfiddle.net/VTevz/7/