2014年に制作した記事を2016/09に加筆修正
IE6ではlabelでinputタグとテキスト等を囲んだ場合、そのテキスト等をクリックしてもinputタグにフォーカスしない不具合があります。
また、IE6〜8では、inputに対応したlabelタグに画像を入れた場合、画像をクリックしてもinputタグにフォーカスしない不具合があります。
label > img問題はjqueryのコードを使うので、jQueryライブラリが読み込まれていることが前提です。
処理なし
処理あり
IE以外のブラウザおよびIE9以降は特に何も処理しなくても、正しくhtmlを組んでさえいれば、問題なく動作します。
<input type="checkbox" id="label1"><label for="label1">check1</label>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
IE6ではlabelでinputタグとテキスト等を囲んだ場合の不具合は単純にinputをlabelで囲まず、inputのid属性の値とlabelのfor属性の値を一致させて対応すれば解決です。
<input type="checkbox" id="label2"><label for="label2"><img src="画像のパス"></label>
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
label > img問題はとりあえず同様にinputをlabelで囲まず、inputのid属性の値とlabelのfor属性の値を一致させてhtmlを記述しておきます。
cssの設定は特に必要ありません。
$(function(){
//oldIE対策
if (!Modernizr.audio){
$('label > img').click(function () {
$('#'+$(this).parent().attr('for') ).focus().click();
});
}
});
※黒い部分をダブルクリックするとソースを選択できるので、コピーして使ってください。
概ね参考元サイトの通りの通りで良いのですが、oldIE以外には適用させないように、ここではModernizr（サイト内リンク）を用いて、ブラウザを切り分けています。
IE8以下では使えないタグで判定しています（ここではaudioを使っていますが、他のタグでも良いです）。