如何使这个区域图/复选框与JQuery一起工作？ （包括JsFiddle）

Question

我的应用使用表单按区域过滤场地结果。表单包含每个区域的复选框，可以检查多个区域。然后页面仅返回检查区域中的场地。

该页面还有一个城镇的.png地图图像，显示所有不同的区域，每个区域都是可点击的，并与过滤器表单中的区域复选框相对应。 map.png是包含每个区域的多边形形状的图像映射的背景。

这个javascript：

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

将地图上的区域链接到相应的复选框。因此，如果用户选择地图上的北部区域，则会检查北部区域复选框。但是，如果用户选择北区复选框，则不会检查地图上的北区。

因此，如果点击地图上的区域，则会检查复选框，但如果单击该复选框，则地图上的区域不会执行任何操作。

如何让这种互动双向发挥作用？

编辑 - 为某个区域生成的html及其相关的复选框

地图上的区域

<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>

其关联的复选框

<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>

jsfiddle 这是我应用中发生的迷你版

http://jsfiddle.net/dRz9U/

很抱歉，如果这个问题有点混乱，非常感谢帮助！

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');
    }); 
});

这会记录checkbox元素的点击次数，找到相应的area元素并触发对该元素的点击（因此，基本上此代码会模拟点击图片地图时点击{{1} } elements）。

如果您发现自己不止一次使用相同的选择器，那么您可以将函数调用链接到该选择器，以避免选择DOM元素的开销。

<强>更新

在审核了你的jsfiddle后，我提出了解决方案：

checkbox

以下是演示：http://jsfiddle.net/dRz9U/1/

Answer 2

您需要一个复选框点击事件处理程序，它将与您已有的相反。

Answer 3

你的意思是让它们保持同步吗？像这样 ？

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