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

Problem record of using vue+echarts chart

Preface echarts is my most commonly used charting...

Solution to the problem that Docker container cannot access Jupyter

In this project, the Docker container is used to ...

Design a data collector with vue

Table of contents Scenario Core Issues Status mon...

Install ethereum/Ethereum from scratch under CentOS7

Table of contents Preface Add sudo write permissi...

Detailed explanation of flex and position compatibility mining notes

Today I had some free time to write a website for...

18 killer JavaScript one-liners

Preface JavaScript continues to grow and prosper ...

Building command line applications with JavaScript

Table of contents 1. Install node 2. Install Comm...

CSS overflow-wrap new property value anywhere usage

1. First, understand the overflow-wrap attribute ...

Vue implements the drag and drop sorting function of the page div box

vue implements the drag and drop sorting function...

WebWorker encapsulates JavaScript sandbox details

Table of contents 1. Scenario 2. Implement IJavaS...

Steps to install cuda10.1 on Ubuntu 20.04 (graphic tutorial)

Pre-installation preparation The main purpose of ...

Solution to the problem that order by is not effective in MySQL subquery

By chance, I discovered that a SQL statement prod...

HTML line spacing setting methods and problems

To set the line spacing of <p></p>, us...

MySQL statement summary

Table of contents 1. Select database USE 2. Displ...