yamaokaです。
HTMLのフォームでチェックボックスやラジオボタンを扱う場合、 対応したlabel要素を用意することが多いと思います。
<input type="checkbox" id="foo" name="foo">
<label for="foo">
キャプション
</label>
しかし、次のような場合どうでしょう。
<input type="checkbox" id="foo" name="foo">
<label for="foo">
<img src="bar.gif">
キャプション
</label>
もっと具体的にいうと、ユーザーを選択する画面でそれぞれのユーザーのアイコンと名前を表示させるような場合です。
ユーザー選択画面例 posted by (C)フォト蔵
動作は先程と変わらないはず......なのですが、IEの場合（IE6、IE7、IE8ともに）、 画像をクリックしてもチェックボックスの値が切り替わりません。 そこでブラウザーシェアの一番大きなIEで使い勝手が落ちてしまうのを防ぐべく、 次のようなJavaScriptを書きました。
<input type="checkbox" id="foo" name="foo">
<label for="foo" onclick="return clickFormLabel(this)">
<img src="bar.gif">
キャプション
</label>
<script type="text/javascript">
var clickFormLabel = function(label) {
var e = null;
try {
e = document.getElementById(label.htmlFor);
} catch (exception) {}
if (e != null) {
if (e.tagName == "INPUT") {
switch (e.type) {
case "checkbox":
e.checked = !e.checked;
break;
case "radio":
e.checked = true;
break;
default:
e.focus();
break;
}
} else {
e.focus();
}
}
return false;
};
</script>
何をしているのかというと、label要素がクリックされた場合にfor属性で指定されたidの要素が チェックボックスだったら値のON/OFFを切り替え、ラジオボタンだったら選択状態に。 それ以外の場合は要素にフォーカスを当てているだけです。 これでIEでも他のブラウザと同じような使い勝手を実現できます。
少しのJavaScriptでサイト訪問者の使い勝手が向上するケースは結構あるように思います。 そういう場合は積極的にJavaScriptを使っていきたいところですね。