Hiding/Showing Table Cells with JQuery depending on ASP.NET RadioButtonList

Question

Hello All,

Here is jquery code which hides my table cells with the ID of .style2:

 $('#myRadioButtonList').change(function() {

    if ($(this).attr('checked') == true && $(this).val() == "HB") {
        $('.style2').hide("slow");
    };
   });

and here is my radiobuttonlist

     <asp:RadioButtonList ID="myRadioButtonList" runat="server">
         <asp:ListItem Selected="True" Value="HB">None</asp:ListItem>
         <asp:ListItem Value="HOBSKS">Service </asp:ListItem>
         <asp:ListItem Value="OBAKS">Open Service</asp:ListItem>
         <asp:ListItem Value="BBKS">Close Service</asp:ListItem>
     </asp:RadioButtonList>

I am inspired by this topic

http://stackoverflow.com/questions/1159567/using-jquery-with-radiobuttons-to-hide-show-table-rows

This way my jquery is not working, there are mistakes in the part

if ($(this).attr('checked') == true && $(this).val() == "HB") 

I tried those two conditions above alone, and they both are not working. I need to reach to my radiobuttons but seems like I can't. Then how should I write that part in order to make my code work.

Thanks.

Answer 1

Could be that you're using the single "&", try "&&" for the boolean operator

if ($(this).attr('checked') == true && $(this).val() == "HB") 

Answer 2

if ( ($(this).attr('checked') == true) && ($(this).val() == "HB") )

The boolean operator is probably what did it, as David said so well, but it's also good to put ()s around any phrases that might trip up your brain or the browser.

update Oh, your $(this) is pointing to the list, and not to the list items. Try changing your selector to match your HTML output for the items that will change.

update 2 Looks like you need to change your initial selector. Right now you're listening for a change in the table/list overall--you want to listen for a change in all of the radio buttons in the list. So try $("#myRadioButtonList input[type=radio]") instead.