クリッカブルマップとチェックボックスを連動させたい

質問

Webフォーム制作について教えてください。

□北海道　□本州　□四国　□九州

というチェックボックスがあります。その下に日本地図を置いて、日本地図をクリッカブルマップにします。
たとえば地図上の北海道部分をクリックすると、チェックボックスの「□北海道」のところにチェックが入るようにしたいのです。

さんざんググってみましたが挫折いたしました。どうか宜しくお願い申し上げます。

回答No.1

steel_gray · ベストアンサー

Javascriptを使って以下のような感じでどうでしょう？

<script type="text/javascript">
function sample(targetId){
var target = document.getElementById(targetId);
target.checked = !target.checked;
return false;
}
</script>

ＨＴＭＬ部分（抜粋）
areaにonclickを付ける（対応させるinputのidを指定）
<area ～ onclick="return sample('Area1')">
<area ～ onclick="return sample('Area2')">

<input type="checkbox" id="Area1"><label for="Area1">北海道</label>
<input type="checkbox" id="Area2"><label for="Area2">本州</label>

お礼

うぎゃー、ありがとうございます！
哀しいまでに完璧に動きました。
ほんと助かりましたーー。