Using an image as a label, the for attribute does not work in IE

Using an image as a label, the for attribute does not work in IE
For example:

Copy code
The code is as follows:

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

The effect we want to achieve is: click "Bank of China" and the checkbox will be selected (or cancelled). There is no problem in browsers such as FireFox and CHROME, but IE browser does not accept this.

The solution is to use JS:

Copy code
The code is as follows:

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;
}
}
}
}
}
}

<<:  Web Design Principles of Hyperlinks

>>:  Detailed explanation of MySQL user rights management

Recommend

Analysis of the advantages of path.join() in Node.js

You might be wondering why you should use the pat...

Share 20 JavaScript one-line codes

Table of contents 1. Get the value of browser coo...

How to use ss command instead of netstat in Linux operation and maintenance

Preface When operating and managing Linux servers...

5 ways to determine whether an object is an empty object in JS

1. Convert the json object into a json string, an...

MySQL join buffer principle

Table of contents 1. MySQL join buffer 2. JoinBuf...

Working principle and example analysis of Linux NFS mechanism

What is NFS? network file system A method or mech...

jQuery implements dynamic tag event

This article shares the specific code of jQuery t...

Tomcat server security settings method

Tomcat is an HTTP server that is the official ref...

Do designers need to learn to code?

Often, after a web design is completed, the desig...

CSS XTHML writing standards and common problems summary (page optimization)

Project Documentation Directory Div+CSS Naming Sta...

Detailed explanation of the use of Refs in React's three major attributes

Table of contents Class Component Functional Comp...

Sample code for implementing rolling updates of services using Docker Swarm

1. What is Docker Swarm? Docker Swarm is a cluste...

Sample code for configuring nginx to support https

1. Introduction Are you still leaving your websit...