このareamap/checkboxを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'); 
    });  
    }); 

は、対応するチェックボックスにマップ上の領域をリンクします。したがって、ユーザーが地図上の北部エリアを選択すると、北部エリアチェックボックスがチェックされます。しかし、ユーザーが北部チェックボックスを選択した場合、地図上の北部エリアはチェックされません。

地図上のエリアがクリックされるとチェックボックスがチェックされますが、チェックボックスがクリックされると地図上のエリアに何も表示されません。

どのようにこの相互作用を両方の方法で行うことができますか？

編集 - 領域とその関連するチェックボックス

マップ

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

その関連するチェックボックスの領域のHTMLを生成

<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要素のクリックを登録し、（checkbox要素をクリックするときに、基本的に、このコードは、画像マップをクリックをシミュレート）に対応area要素を見つけ、その要素をクリックをトリガします。

同じセレクタを複数回使用すると、そのセレクタに関数呼び出しを連鎖させて、DOM要素を選択するオーバーヘッドを避けることができます。

UPDATE

ここにあなたのjsfiddleを確認した後、私が思いついた解決されています。ここでは

$(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; 
    }); 
}); 

はデモです：

Answer 2

あなたがその意志のチェックボックスをクリックしてイベントハンドラを必要としますあなたがすでに持っているものの逆を行います。

Answer 3

あなたはそれらを同期させておくことを意味しますか？このような ？ [下位互換性（http://en.wikipedia.org/wiki/Backward_compatibility）の

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