title: jQuery/Javascript: Click event on a checkbox and the 'checked' attribute
body: <p>The code:</p>
  
  <pre><code>$('input.media-checkbox').live('click', function(e){
  
      e.preventDefault();
      var that = $(this);
  
      if (that.attr('checked') == 'checked'){
  
          var m = that.attr('media');
          var mid = 'verify_' + m;
          that.parents('div.state-container').find('ul.' + mid).remove();
          that.attr('checked', false);
      } else {
  
          var url = AJAX_URL;
  
          $.ajax({
             type: 'GET',
             url: url,
             dataType: 'html',
             success: function(data){
  
                  that.parents('li').siblings('li.verification').children('div.media-verification').append(data).fadeIn(500);
                  that.attr('checked', 'checked');
             }
          }); 
      }
  
      return false;
  });
  </code></pre>
  
  <p>I am ajaxing in a form, then firing the click event on relevant checkboxes to ajax in another partial if necessary.  The form is inserted nicely, and the click events are fired, checking the boxes that need to be checked and firing the second ajax, since the <code>checked</code> attribute of the checkbox was initially <code>false</code>.</p>
  
  <p>What's curdling my cheese is if I UNCHECK one of those boxes.  Despite <code>e.preventDefault()</code>, the <code>checked</code> attribute is set to <code>false</code> BEFORE the test, so the <code>if</code> statement always executes the <code>else</code> statement.  I've also tried this with <code>$.is(':checked')</code>, so I'm completely baffled.</p>
  
  <p>It appears that unchecked -> checked state reads the original state, but checked -> unchecked doesn't.  Any help?</p>