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

MySQL database implements OLTP benchmark test based on sysbench

Sysbench is an excellent benchmark tool that can ...

Detailed explanation of desktop application using Vue3 and Electron

Table of contents Vue CLI builds a Vue project Vu...

Web Design Tutorial (1): Steps and Overall Layout

<br /> Note: All texts, except those indicat...

JavaScript canvas to achieve colorful clock effect

Use canvas to write a colorful clock! 1. Title (1...

How to create a swap partition file in Linux

Introduction to Swap Swap (i.e. swap partition) i...

Vue implements div wheel zooming in and out

Implement div wheel zooming in and out in Vue pro...

Calculation of percentage value when the css position property is absolute

When position is absolute, the percentage of its ...

How to quickly build an FTP file service using FileZilla

In order to facilitate the storage and access of ...

Vue3 Vue CLI multi-environment configuration

Table of contents 1. Introduction 2. Switching 1....

Optimize MySQL with 3 simple tweaks

I don't expect to be an expert DBA, but when ...

Docker implements cross-host container communication based on macvlan

Find two test machines: [root@docker1 centos_zabb...

Docker automated build Automated Build implementation process diagram

Automated build means using Docker Hub to connect...

What is Software 404 and 404 Error and what is the difference between them

First of all, what is 404 and soft 404? 404: Simpl...