画像をラベルとして使用すると、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ユーザー権限管理の詳細な説明

推薦する

MySQL テーブル自動増分 ID オーバーフロー障害レビュー ソリューション

問題: MySQLテーブル内の自動増分IDのオーバーフローによりビジネスブロックが発生した背景: t...

Vue.jsフレームワークはショッピングカート機能を実装します

この記事では、ショッピングカートを実装するためのVue.jsフレームワークの具体的なコードを参考まで...

Docker ベースの Jenkins のデプロイに関する詳細なチュートリアル

このドキュメントを作成した当時は2019年12月頃で、er2.200が最新バージョンでした。 1.画...

React の 10 個のフックの紹介

目次ReactHook とは何ですか? Reactは現在フックを提供している1. 使用状態2.use...

vue3+TypeScript+vue-routerの使い方

目次使いやすいプロジェクトを作成するvue-cli 作成ヴィートクリエイションvue-routerを...

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

HTMLデータ送信投稿_PowerNode Java Academy

HTTP/1.1 プロトコルで指定されている HTTP リクエスト メソッドには、OPTIONS、...

VUE レンダリング機能の使い方と詳細な説明

目次序文レンダリングの役割レンダリング機能の説明レンダリングとテンプレートの違いレンダリング例要約す...

Dockerはコンテナにポートを動的に公開します

コンテナのIPアドレスを表示するdocker examine <コンテナ名またはID> ...

Vue はカスタム「モーダル ポップアップ ウィンドウ」コンポーネントのサンプル コードを実装します

目次序文レンダリングサンプルコード要約する序文ダイアログ ボックスは非常に一般的なコンポーネントであ...

yumコマンドの使い方

1. yumの紹介Yum (フルネームは Yellow dogUpdater、Modified) は...

HTML の類似タグと属性の違いの詳細な説明

【1】<i></i>タグと<em></em>タグ同じ...

Ajax は CORS レスポンス ヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケース スタディを実現します。

1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定するクロスオリジンリソース共有...

Dockerコンテナのログ分析

コンテナログを表示するまず、 docker run -it --rm -d -p 80:80 ngi...

Element における複数データ読み込み最適化の実装

目次シナリオコードの実装要約:シナリオ最近、ElementUI をベースにしたバックグラウンド管理シ...