title: How to toggle attribute in jQuery
body: <p>I'm trying to use images as checkboxes. The following would work fine if it were radios instead of checkboxes that I was targeting but with checkboxes the problem is I can't select an element by clicking on it again after selecting it.</p>
  
  <pre><code>// image checkbox
  $('#imageCheckBoxes img').click(function() {
      $(this).parent('span').find('input:checkbox').attr('checked', 'checked');
  });
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div id="imageCheckBoxes"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href=""&gt;Africa&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Asia/Pacific Islands&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Australia&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Central/South America&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Europe/Russia&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;North America&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;United Kingdom&lt;/a&gt;  &lt;span&gt;&lt;img src="images/checkbox-inactive.png" /&gt;&lt;input type="checkbox" name="" value="" /&gt;&lt;/span&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I need to basically toggle the check <code>attr()</code> part.</p>
  
  <p>How to do that?</p>