1. ホーム
  2. Web制作
  3. HTML/Xhtml

画像をラベルとして使用する場合、IEでは属性が機能しない。

2022-01-29 17:22:22
例えば
コピーコード
コードは以下の通りです。

<input type="checkbox" id="a"><label for="a"><img src="... "></label>

欲しい効果は、"Bank of China"をクリックすると、チェックボックスにチェックが入る(またはチェックが外れる)ことです。FireFoxやCHROMEなどでは問題ないのですが、Internet Explorerでは食指が動きません。
解決策は、JSを使うことです。
コピーコード
コードは以下の通りです。

window.onload = function(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows& quot;)>-1)
{
var a = document.getElementsByTagName("label");
for(var i=0,j=a.length;i<j;i++){
if(a[i].hasChildNodes && a[i].childNodes.item(0).tagName == "IMG")
{
a[i].childNodes.item(0).forid = a[i].htmlFor;
a[i].childNodes.item(0).onclick = function(){
var e = document.getElementById(this.forid);
switch(e.type){
case "radio": e.checked|=1;break;
case "checkbox": e.checked=!e.checked;break;
case "text": case "password": case "textarea": e.focus(); break;
}
}
}
}
}
}