How can I make this areamap/checkbox work both ways with JQuery? (JsFiddle included)

Question

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.

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.

This javascript:

$(function() {
    $('area').click(function(){
      var name = $(this).data("areanum");
      var $checkbox = $('#' + name);
      $checkbox.attr('checked', !$checkbox.attr('checked'));
      $checkbox.button('refresh');
    });       
  });

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.

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.

How can I make this interaction work both ways?

The area on the map

<div class="map_container">

  <img alt="" class="map" height="450" src="/assets/maps/mainmap.png" usemap="#mainmap" width="450" />

  <map name="mainmap">
    <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'" >
  </map>              
</div>

its associated checkbox

<div class="filter_options_container">
  <form accept-charset="UTF-8" action="" id="filter_form" method="get"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /></div>

    <fieldset class="filter_form_fieldset areas">
        <p class="area_check"><input id="area-42" name="areas[]" type="checkbox" value="42" />
        <label for="area-42"><p1>North</p1></label></p>
    </fieldset>

    <div class="filter_form_button">
      <p2><input type="submit" value="Show me"/></p2>
    </div>
</form></div>

this is a mini version of what is happening in my app 这是我应用程序中正在发生的事情的迷你版

http://jsfiddle.net/dRz9U/

Sorry if the question is a bit confusing, and help would be very much appreciated!

Answer 1

$(function() {
    var $area = $('area');
    $area.click(function(){
        var $checkbox = $('#' + $(this).data("areanum"));
        $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });
    $('input[type="checkbox"]').click(function () {
        $area.filter('[name="' + this.id + '"]').trigger('click');
    }); 
});

This registers clicks on checkbox elements, finds the corresponding area element and triggers a click on that element (so basically this code simulates clicking on the image-map when clicking on the checkbox elements).

If you find yourself using the same selector more than once right next to each other, then you can chain the function calls to that selector to avoid the overhead of selecting DOM elements.

UPDATE

After reviewing your jsfiddle here is the solution I came up with:

$(function() {
    var $area = $('area');
    $area.click(function(){
        var $checkbox = $('#' + $(this).data("areanum"));
        $checkbox.attr('checked', !$checkbox.attr('checked')).button('refresh');
    });

    //instead of binding to the input elements, this binds to their associated label elements
    $('label').click(function () {

        //trigger a click on the area element that is associated with this label element (the reference is in the `for` attribute)
        $area.filter('[data-areanum="' + $(this).attr('for') + '"]').trigger('click');

        //now stop this event handler from bubbling over to the input element (this is done because if we let the event get to the input element then it will un-hilight the label element)
        return false;
    });
});

Here is a demo: http://jsfiddle.net/dRz9U/1/

Answer 2

您需要一个复选框click事件处理程序，该处理程序将与您已有的操作相反。

Answer 3

do you mean to keep them in sync? like this ?

http://jsfiddle.net/eiu165/s24yW/