title: control a checkbox via an IMG using jquery
body: <p>I want to control the checked state of a checkbox when a user clicks on an image with the class of ".latinAmerica" within the page. Each click should check/uncheck it each time.</p>
  
  <p>I've tried a ton of different methods but I can't find anything suitable for checkboxes.</p>
  
  <p>EG:</p>
  
  <pre><code>$('.latinAmerica').click(function () {  
      if($('input:checkbox[name=theName]:nth(0)').is(':checked')) {
          $('input:checkbox[name=theName]:nth(0)').attr('checked',true);
      } else {
          $('input:checkbox[name=theName]:nth(0)').attr('checked',false);
      }   
  });
  </code></pre>
  
  <p>or</p>
  
  <pre><code>$('.latinAmerica').click(function () {  
      $("input:checkbox[name=theName]:nth(0)").prop("checked", true);
  });
  </code></pre>
  
  <p>I did get this method working with radio buttons:</p>
  
  <pre><code>$('.latinAmerica').click(function () {  
      $('input:checkbox[name=theName]:nth(0)').attr('checked',true);
  });
  </code></pre>
  
  <p>But no luck with checkboxes.</p>
  
  <p>What am I doing wrong :( </p>
  
  <p>Thanks.</p>