title: Radio button unchecked after clicked in AJAX-like scenario
body: <p>I have a textfield for which change events are bound to a function that validates the textfield's value and may splice a corresponding validation error message into the DOM above the textfield. If the change event is triggered by clicking one of a pair of somewhat unrelated radio buttons, the radio button that is clicked gains the focus but, against my and users' expectations, does not become checked - this is the problem.</p>
  <p>Although the validation in the final system will be carried out server-side using AJAX, the following code demonstrates that AJAX has nothing to do with the problem.</p>
  <p>Can you tell me what I'm missing here:</p>
  <pre><code>&lt;html&gt;
  &lt;head&gt;                                                                  
  &lt;STYLE type=&quot;text/css&quot;&gt;
      .highlighted { color: red; }
  &lt;/STYLE&gt;
  
  &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js&quot;&gt;&lt;/script&gt;          
  &lt;/head&gt;                                                                 
  &lt;body&gt;                                                                  
  
  &lt;span id=&quot;errors&quot;&gt;
  &lt;/span&gt;
  
  &lt;label for=&quot;mytextfield&quot;&gt;First, type something in this textfield&lt;/&gt;
  &lt;input type=&quot;text&quot; id=&quot;mytextfield&quot; name=&quot;mytextfield&quot;/&gt;
  
  &lt;p&gt;Second, click on one of these radio buttons&lt;/&gt;
  
  &lt;INPUT TYPE=&quot;radio&quot; NAME=&quot;binaryquestion&quot; VALUE=&quot;Y&quot; &gt;Yes&lt;/&gt;
  &lt;INPUT TYPE=&quot;radio&quot; NAME=&quot;binaryquestion&quot; VALUE=&quot;N&quot; &gt;No&lt;/&gt;
  
  &lt;script type=&quot;text/javascript&quot;&gt;
      $(document).ready(function() {
          //$(&quot;#mytextfield&quot;).change(validateTextField);
          $(&quot;#mytextfield&quot;).change(spliceInTheValidationResultMessage);
      });
  
      function validateTextField() {
              $.ajax({
                  url: 'http://www.google.com',
                  success: function(data) {
                      spliceInTheValidationResultMessage();
                  }
              });
      }
  
      function spliceInTheValidationResultMessage() {
          $(&quot;#errors&quot;).append(&quot;&lt;p&gt;Thank you for your input!&lt;/p&gt;&quot;).addClass(&quot;highlighted&quot;);
          alert(&quot;I expect the radio button that you clicked to become checked. However, close this dialog and you'll see that it will have gained the focus but is NOT checked!&quot;);
      };
  
  &lt;/script&gt;
  &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>