Windows版IE6, IE7, IE8 での＜label＞タグがきかない不具合に対応する。

チェックボックスやラジオボタンの様にクリックするのが小さいフォームを作るときは、

フォームの横の文字もクリック出来るようにしておくととても便利です。

それを実現するのが＜label＞タグなのですがIEでは以下の2つの不具合があります。

■ 1.IE6では＜label＞＜/label＞でテキストを囲んだだけでは動作しない

以下のコードはIE6では動作しません。

<label><input type="checkbox" />チェックボックス1</label>
<label><input type="checkbox" />チェックボックス2</label>

以下のように全ての＜checkbox＞にidをセットして、＜label＞タグでそのIDを指定します。

<input type="checkbox" id="label_1" /><label for="label_1">チェックボックス1</label>
<input type="checkbox" id="label_2" /><label for="label_2">チェックボックス2</label>

■ 2.IE6, IE7, IE8では＜label＞タグ内に画像があった場合その画像をクリックしても何も起こらない

IE9では修正されていますが、IE6,7,8では以下のコードの時画像をクリックしてもチェックボックスにチェックはつきません。

<input type="checkbox" id="label_1" /><label for="label_1"><img src="photo.jpg" /></label>

それを修正するにはJavaScript(jQuery)プラグインを使用します。

$(function () {
        $('label > img').click(function () {
            $('#'+$(this).parent().attr('for') ).focus().click();
        });
});

これを「jquery.ie678label.js」で保存してサーバーにアップロード。

条件付きコメントでIE8以下のブラウザにのみ読み込ませます

<!--[if lte IE 8]>
<script type="text/javascript" src="jquery.ie678label.js"></script>
<![endif]-->

これhtmlは何も書き換えずにIE6,7,8,で＜label＞内画像をクリックできるようになります。