unoh.github.com

IEでlabelの子要素に画像を含める

2009-04-08 08:47:35 +0000

yamaokaです。

HTMLのフォームでチェックボックスやラジオボタンを扱う場合、 対応したlabel要素を用意することが多いと思います。

<input type="checkbox" id="foo" name="foo">
<label for="foo">
  キャプション
</label>
わざわざ小さなチェックボックスやラジオボタンを狙ってクリックする必要がなくなり、 labelタグで囲まれたキャプションの部分をクリックすればよいようになります。

しかし、次のような場合どうでしょう。

<input type="checkbox" id="foo" name="foo">
<label for="foo">
  <img src="bar.gif">
  キャプション
</label>
label要素の中にimg要素(画像)が含まれているような場合を考えてみます。

もっと具体的にいうと、ユーザーを選択する画面でそれぞれのユーザーのアイコンと名前を表示させるような場合です。
ユーザー選択画面例
ユーザー選択画面例 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を使っていきたいところですね。