画像をラベルとして使用すると、IE では for 属性が機能しません。

画像をラベルとして使用すると、IE では for 属性が機能しません。
例えば:

コードをコピー
コードは次のとおりです。

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

達成したい効果は、「Bank of China」をクリックするとチェックボックスが選択(またはキャンセル)されることです。 FirefoxやCHROMEなどのブラウザでは問題ありませんが、IEブラウザでは受け付けられません。

解決策は JS を使用することです:

コードをコピー
コードは次のとおりです。

window.onload = 関数(){
if(document.all && navigator.appVersion.indexOf("MSIE")>-1 && navigator.appVersion.indexOf("Windows")>-1)
{
var a = document.getElementsByTagName("ラベル");
(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 = 関数(){
var e = document.getElementById(this.forid);
スイッチ(e.type){
case "radio": e.checked|=1;break;
case "チェックボックス": e.checked=!e.checked;break;
case "text": case "password": case "textarea": ​​e.focus(); break;
}
}
}
}
}
}

<<:  VMware + Ubuntu18.04 による Hadoop クラスタ環境の構築に関するグラフィック チュートリアル

>>:  MySQLユーザー権限管理の詳細な説明

推薦する

Reactイベントメカニズムソースコード分析

目次原理ソースコード分析委任されたイベントバインディングすべてのサポートされているイベントを聴くネイ...

Webリクエストと処理のTomcatソースコード分析

目次序文1. エンドポイント2. 接続ハンドラ3. コヨーテ4. コンテナ責任チェーンパターン序文T...

Vueは画像のドラッグアンドドロップ機能を実装します

この記事の例では、画像のドラッグアンドドロップ機能を実現するためのVueの具体的なコードを参考までに...

MySQL PXC クラスターの構築方法

目次1. PXCの紹介1.1 PXC の紹介1.2 PXC の特徴と利点1.3 PXCの限界と欠点1...

CSS でのシングル div 描画テクニックの実装

純粋な HTML + CSS を使ってドラえもんの絵を描くなど、CSS 描画に関する記事をよく見かけ...

mysql5.7.14 解凍版インストールと設定方法 グラフィックチュートリアル (win10)

Win10はmysql5.7の解凍版をインストールします。参考までに、具体的な内容は次のとおりです...

nginx httpモジュールのデータ保存構造の概要

このセクションから、http モジュールの実装原理について説明します。http モジュールで非常に重...

Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)

序章nginx が優れたリバース プロキシ サービスであることは誰もが知っています。nginx を使...

MySQL テーブルを作成するためによく使用される SQL ステートメントの概要

最近、私はプロジェクトに取り組んでおり、背景を記述するために SQL ステートメントを使用する必要が...

Vue2.x における双方向バインディングの原理と実装

目次1. 実施プロセス2. オブザーバーを表示する3. ウォッチャーを実装する4. コンパイルを実装...

フレックスレイアウトは左のテキストオーバーフローを実現し、右のテキストの適応を省略します

テキストの長さに応じて、左側のテキストの幅を自動調整できる状況を実現したい。1行が表示できない場合、...

MySQL 5.6 のインストール手順(画像とテキスト付き)

MySQL はオープンソースの小規模リレーショナル データベース管理システムです。現在、MySQL...

HTML ウェブページ作成のための 8 つの強力なテクニック

<br />作業を簡単に完了できる Web ページ作成ツールは数多くありますが、HTML...

CocosCreator 入門チュートリアル: TS で初めてのゲームを作る

目次前提TypeScript と JavaScriptコードエディタの選択TypeScriptを学ぶ...