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

推薦する

Vue が 4 レベルのナビゲーションと検証コードを実装する方法の例

効果: まず5つのVueインターフェースを作成する1.home.vueページ <テンプレート&...

Vueプロジェクトでコンポーネントをカプセル化する簡単な手順

目次序文Toastコンポーネントをカプセル化する方法ユースケース具体的な実装要約する序文ビジネスが発...

虫眼鏡の詳細のJavaScript実装

目次1. レンダリング2. 実施原則3. まとめ1. レンダリング 2. 実施原則幅と高さが等しい拡...

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

60件のページング事例と優れた実践例を推奨

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

MySQL の遅いクエリの最適化方法と最適化の原則

1. 日付のサイズを比較するには、XML に渡される日付形式は 'yyyy-MM-dd...

さまざまな Tomcat ログと catalina.out ファイルのセグメンテーションの関係についての簡単な分析

Tomcatログの関係一枚の写真は千の言葉に値する! localhost.{yyyy-MM-dd}....

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

学生情報管理システムを実装するためのJavaScript+HTML

目次1. はじめに2. レンダリング3. コード4. 学生情報管理システムのメインインターフェース1...

HTML で複数のフォームのテキスト ボックスを揃える方法

フォームのコードは図の通りです。スタイルシートがまだ追加されていないため、フォームが整列されておらず...

Lua モジュールを使用して WAF を実装する Nginx の原理の分析

目次1. WAFの背景2. WAFとは3. 動作原理4. WAF機能5. WAFと従来のファイアウォ...

HTML と JavaScript を使用してローカル メディア (ビデオとオーディオ) ファイルを再生する方法

まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...

MySQLデータベースの使用仕様の概要

導入: MySQL データベースの仕様に関しては、皆さんも何らかのドキュメントを読んだことがあると思...

CentOS 8.0.1905 は ZABBIX 4.4 バージョンをインストールします (検証済み)

Zabbix サーバー環境プラットフォームバージョン: ZABBIX バージョン 4.4システム:...

Linux系でよく使われる運用・保守コマンド(まとめ)

目次1. システム監視2. ファイル操作3. ネットワーク通信4. システム管理仕事で必要なLinu...