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

The process of installing and configuring nginx in win10

1. Introduction Nginx is a free, open source, hig...

Two methods of implementing automatic paging in Vue page printing

This article example shares the specific code of ...

How to use Antd's Form component in React to implement form functions

1. Construction components 1. A form must contain...

Things to note when migrating MySQL to 8.0 (summary)

Password Mode PDO::__construct(): The server requ...

HTML 5 Preview

<br />Original: http://www.alistapart.com/ar...

Native JS implementation of loading progress bar

This article shares a dynamic loading progress ba...

VUE+Canvas implements the game of God of Wealth receiving ingots

Welcome to the previous canvas game series: 《VUE ...

Sample code for implementing Google third-party login in Vue

Table of contents 1. Developer Platform Configura...

Full HTML of the upload form with image preview

The upload form with image preview function, the ...

A few front-end practice summaries of Alipay's new homepage

Of course, it also includes some personal experien...

MySQL master-slave synchronization principle and application

Table of contents 1. Master-slave synchronization...

Detailed explanation of prototypes and prototype chains in JavaScript

Table of contents Prototype chain diagram Essenti...

Detailed example of how to implement transaction commit and rollback in mysql

Recently, we need to perform a scheduled migratio...

Front-end vue+express file upload and download example

Create a new server.js yarn init -y yarn add expr...