title: Cannot get jQuery and RadioButtonList to Work
body: <p>I'm pulling my hair out trying to get a jQuery script working that will pick up the selected value in a RadioButtonList. I've done the usual thing when I can't get a script to run - cut and paste somebody else's into a blank page, get it working and then copy into the required page.</p>
  
  <p>I have tried three different scripts, however, that take different approaches to defining the selected value but I can't get any of them to work, even though comments on some of the  webpages I got them from seem to suggest that they are working for other people.</p>
  
  <p>This script throws an unrecognised expression error:</p>
  
  <pre><code>//In head with prior reference to local copy of jquery-1.4.1.js
  &lt;script language="javascript"&gt;
      $(document).ready(function() {
          $("#btnSubmit").click(function() {
              alert($("#RadioButtonList1").find("input[@checked]").val());
          });
      });
  &lt;/script&gt;
  
  //In body
  &lt;asp:RadioButtonList ID="RadioButtonList1" runat="server"&gt;
      &lt;asp:ListItem&gt;1&lt;/asp:ListItem&gt;
      &lt;asp:ListItem&gt;2&lt;/asp:ListItem&gt;
     &lt;asp:ListItem&gt;3&lt;/asp:ListItem&gt;
  &lt;/asp:RadioButtonList&gt;
   &lt;input id="btnSubmit" type="button" value="Submit" /&gt;
  </code></pre>
  
  <p>In the following code, the alert box justs gives 'undefined' (Note I've tried it with both the remote reference and reference to local copy of jquery-1.4.1.js )</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head id="Head1" runat="server"&gt;
    &lt;title&gt;&lt;/title&gt;
  
    &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
     &lt;div&gt;
      &lt;asp:RadioButtonList ID="RadioButtonList1" runat="server"&gt;
          &lt;asp:ListItem Text="Yes" Value="1"&gt;&lt;/asp:ListItem&gt;
          &lt;asp:ListItem Text="No" Value="2"&gt;&lt;/asp:ListItem&gt;
      &lt;/asp:RadioButtonList&gt;
     &lt;/div&gt;
     &lt;input type="button" id="btnTest" value="Uncheck" /&gt;
    &lt;/form&gt;
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
  
   $('#btnTest').click(function () {
      alert($('#&lt;%=RadioButtonList1.ClientID %&gt; input[type=radio]:checked').val());
   });
  
  &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>I've also tried the following in a basic HTML page (i.e. not asp.net) and it does nothing</p>
  
  <pre><code>//In head
  $("input[@name='option_layout']").change(
  function()
  {
      if ($("input[@name='option_layout']:checked").val())
          $(".group").toggleClass("group_vert");
      else
          $(".group").toggleClass("group_vert");
      $(this).blur();
  }
  );
  
  //In body
  &lt;input type="radio" name="option_layout" value="0" checked="checked" /&gt;
  &lt;input type="radio" name="option_layout" value="1" /&gt;
  </code></pre>
  
  <p>I've tried modifying .change to .click as I know that there is a bug in IE with .change, even though I had tested with no success in both IE and Fiefox. I also tried wrapping the code inside a   $(document).ready(function() block but no difference. I've also tried adding an alert box into the first line of the function but it again throws an unrecognised expression error.</p>
  
  <p>Anyone any idea what is going wrong here?</p>