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を使っていきたいところですね。