title: How can I make this areamap/checkbox work both ways with JQuery? (JsFiddle included)
body: <p>My app filters venue results by area using a form. The form contains a checkbox for each area and multiple areas can be checked. The page then returns only the venues which are in the checked areas.</p>
  
  <p>The page also has a .png map image of a town showing all the differant areas and each area is clickable and corresponds with an area checkbox in the filter form. The map.png is the background of an image-map containing a poly shape for each area.</p>
  
  <p>This javascript:</p>
  
  <pre><code>$(function() {
      $('area').click(function(){
        var name = $(this).data("areanum");
        var $checkbox = $('#' + name);
        $checkbox.attr('checked', !$checkbox.attr('checked'));
        $checkbox.button('refresh');
      });       
    });
  </code></pre>
  
  <p>Links the areas on the map to their corresponding checkboxes. So if a user selects the northern area on the map, the northern area checkbox gets checked. However, if the user selects the northern area checkbox the northern area on the map doesn't get checked. </p>
  
  <p>So if the area on the map gets clicked it checks the checkbox but if the checkbox gets clicked the area on the map does nothing.</p>
  
  <p>How can I make this interaction work both ways?</p>
  
  <p><b>edit - generated html for an area and its associated checkbox</b></p>
  
  <p><i>The area on the map</i></p>
  
  <pre><code>&lt;div class="map_container"&gt;
  
    &lt;img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" /&gt;
  
    &lt;map name="mainmap"&gt;
      &lt;area id="north" data-areanum="area-42" shape="poly" 
        coords="158,43,152,49,164,86,165,112,153,153,139,169,145,171,161,176,236,201,241,202,251,166,253,142,257,132,294,102,269,85,240,68,227,53,213,28,202,27" alt="North"
        data-maphilight='{"stroke":false,"fillColor":"5F9EA0","fillOpacity":0.6}'
        onmouseover="document.body.style.cursor='pointer'" 
        onmouseout="document.body.style.cursor='default'" &gt;
    &lt;/map&gt;              
  &lt;/div&gt;
  </code></pre>
  
  <p><i>its associated checkbox</i></p>
  
  <pre><code>&lt;div class="filter_options_container"&gt;
    &lt;form accept-charset="UTF-8" action="" id="filter_form" method="get"&gt;&lt;div style="margin:0;padding:0;display:inline"&gt;&lt;input name="utf8" type="hidden" value="&amp;#x2713;" /&gt;&lt;/div&gt;
  
      &lt;fieldset class="filter_form_fieldset areas"&gt;
          &lt;p class="area_check"&gt;&lt;input id="area-42" name="areas[]" type="checkbox" value="42" /&gt;
          &lt;label for="area-42"&gt;&lt;p1&gt;North&lt;/p1&gt;&lt;/label&gt;&lt;/p&gt;
      &lt;/fieldset&gt;
  
      &lt;div class="filter_form_button"&gt;
        &lt;p2&gt;&lt;input type="submit" value="Show me"/&gt;&lt;/p2&gt;
      &lt;/div&gt;
  &lt;/form&gt;&lt;/div&gt;
  </code></pre>
  
  <p><b>jsfiddle</b> <i>this is a mini version of what is happening in my app</i></p>
  
  <p><a href="http://jsfiddle.net/dRz9U/" rel="nofollow">http://jsfiddle.net/dRz9U/</a></p>
  
  <p>Sorry if the question is a bit confusing, and help would be very much appreciated!</p>