Using Images as Labels in Internet Explorer

Internet Explorer has a bug where wrapping a label around an image doesn't work the same as if you wrap it around text.

Example:

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

What the label does is create an association between its contents and a control on the page. In most browsers, clicking on text or an image within the label will give focus to the area. In the case of a radio button, it will select it and in the case of a checkbox, it'll alternate between the two states (checked and unchecked).

Internet Explorer, however, has a bug where clicking on an image inside a label tag does nothing. (Actually, I should say nothing useful because with radio buttons and checkboxes it looks like it tries to select the control but never does.)

What I've done is put together a quick bit of unobtrusive JavaScript to "fix" the problem. Albeit, only for people with JavaScript turned on.

window.onload = function(){
  if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-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;
          }
        }
      }
    }
  }
}

What the code does is loop through all labels on the page and checks whether the first child node is an image [1]. If it is then it attaches an onclick event handler which when run, checks to see what type of form control it's attached to and performs the expected action.

[1] While I don't have a specific need for it, it is theoretically possible to have the image not be the first child node within the label. The code would need to be expanded to locate where and how many images are inside a label and assign the event handler that way.

One additional caveat, this code would theoretically override any existing onclick event handler, so best to think about all the scenarios and plan!

Update on November 21, 2010: A jQuery solution provided by Eli Penner.

$("label img").live("click", function() {
  $("#" + $(this).parents("label").attr("for")).click();
});

Update on November 22, 2015: A CSS solution for IE11.

label img{
    pointer-events: none;
}
label{
    display: inline-block;
}

The inline-block ensures that the image gets wrapped properly so that it can be clicked on.

(Thanks to Saulius Žemaitaitis for letting me know about this.)