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

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/

Answer 2

This would be easier if you added a value of the hidden field's ClientID to your respective radio buttons. You can do this in your code-behind (e.g., in the radio button's pre-render event: RadioButton1.Attributes.Add("value", HiddenField1.ClientID)). You should also probably add a CSSClass to the buttons you have marked for choices (i.e., CSSClass="choice" or RadioButton1.Attributes.Add("class", "choice") depending on if you want to do it in markup or code-behind).

That should change your rendered markup to <input type="radio" value="ctl00_cphMain_HiddenField1" name="ctl00$cphMain$RadioButton1" id="ctl00_cphMain_RadioButton1"> (or something substantially similar).

Once your markup is modified, your jQuery becomes:

$('input.choice[type="radio"]').click(function () {
    var $this = $(this);         //easy alias.
    var answer = $this.val();   //hidden field id
    var cssClass = '';
    if ($this.attr('checked')) {
        cssClass = $(answer).val().toLowerCase() === 'true' ? 'correct' : 'wrong';
    }
    $this.removeClass('correct').removeClass('wrong').addClass(cssClass).;
});

Answer 3

Make sure the hidden has the same name as the radiobutton and there you go:

$('input[type=radio]').change(function() {
    if (this.checked == $('input[type=hidden],[name=' + this.name + ']').val()) {
        $(this).closet('#Answer').removeClass('correct').addClass('wrong');
    }
    else {
        $(this).closet('#Answer').removeClass('wrong').addClass('correct');
    }
});

Answer 4

Since you have not grouped the radio buttons they both can be selected at the same time. You should specify the GroupName in both the buttons with same name.

After you specify the name, lets say "answers" you can try this.

$('input[name="answers"]').click(function(){
    if($('#HiddenField' + $(this).index()).val().toLowerCase() == "true"){
        $("#Answer").removeClass('wrong').addClass('correct');  
    }
    else{
        $("#Answer").removeClass('correct').addClass('wrong');
    }
});

Answer 5

$('#rdAnsBool1').click(function(e) {
    if ($('#HiddenField1').attr('Value')=='True') {
        $('#Answer').addClass('correct');
    } else {
        $('#Answer').addClass('wrong');
    }
});