asp.net - How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery? -

asp.net - How can i apply and/or remove a CSS class upon user selection on Radiobuttons with JQuery? -

my aspx markup follows. visitor may select reply choosing "winning question" radiobutton

the hiddenfields contain true or false

so if user selects rdansbool1 , value of hiddenfield1 "true", jquery should add together "correct" css class parent div id = answer

if user selects rdansbool1 , value of hiddenfield1 "false", jquery should add together "wrong" css class parent div 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 jquery?

update. reply div located within listview. reason paint parent div.

just update afraid of jquery...

the markup has changed following... reason offer 200 boundy 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 jsfiddle part

http://jsfiddle.net/vtevz/

this thing driving me nuts

// reference radio button , attach alter handler $('input[id*="rdansbool"]').change(function(){ var container = $(this).closest('div.ans'), questionid = $(this).attr('id'), index = questionid[questionid.indexof('rdansbool') + 1]; // test status , 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 post html markup , not asp markup when working in browser context):

http://jsfiddle.net/vtevz/7/

jquery asp.net css