制作ブログ

IEで画像・テキストにlabelタグを使いたい！

こんにちは、制作部の梶山です。
今回はlabelタグについてのお話です。

お問い合わせやお申し込み画面の
ユーザビリティを向上させるためによく使われるlabelタグですが、
IE6.7.8ではチェックボックスやラジオボタンなどに
ラベルを適応したくても一筋縄では動いてくれません。

特に画像はまったくの無反応・・・。
FirefoxやGoogle Chromeなどは問題ありませんが
IEさん、いつものようにしれっとその威力を見せつけてくれます。

テキストへの正しい記述はこちら

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

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

下のコードのようにinputタグを囲んだりすると動いてくれません。
IE6では「for」でしっかりidを指定しましょう。

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

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

では、画像への記述は・・・

$(function () {
//IE Label img
  if ($.browser.msie) {
    $('label').click(function () {
      $('#' + $(this).attr('for')).focus().click();
    });
  }
});

$(function () {

//IE Label img

if ($.browser.msie) {

$('label').click(function () {

$('#' + $(this).attr('for')).focus().click();

});

}

});

<label for="test1"><img src="images/a.gif" width="180" height="140" alt="test"></label>
<input id="test1" type="checkbox" /><label for="test1">チェックボックス1</label>

1 2	<label for="test1"><img src="images/a.gif" width="180" height="140" alt="test"></label> <input id="test1" type="checkbox" /><label for="test1">チェックボックス1</label>