ブラウザ間でラジオ ボタン グループの変更を確実に追跡する方法

Mary-Kate Olsen
リリース: 2024-10-31 09:40:38
オリジナル
184 人が閲覧しました

How to Reliably Track Changes in Radio Button Groups Across Browsers?

ラジオ ボタン グループの Change イベントのクロスブラウザ ソリューション

複数の入力が同じ名前を共有するラジオ ボタン グループでは、onChange イベント変更の追跡に関しては信頼できない可能性があります。これは、ラジオ ボタンの選択が解除されている場合、onChange が起動しないためです。

回避策: イベントの委任と状態管理

回避策の 1 つは、イベントの委任と状態管理を使用することです。以前にチェックしたラジオ ボタンを追跡します。ラジオ ボタンを含むフォームに単一のイベント リスナーを追加することで、すべての変更イベントをキャプチャし、それに応じて状態を更新できます。

<code class="javascript">var rad = document.myForm.myRadios;
var prev = null;

for (var i = 0; i < rad.length; i++) {
    rad[i].addEventListener('change', function() {
        (prev) ? console.log(prev.value): null;
        if (this !== prev) {
            prev = this;
        }
        console.log(this.value)
    });
}</code>
ログイン後にコピー

このスクリプトは、各ラジオ ボタンに変更イベント リスナーを割り当てます。変更が発生すると、現在チェックされているラジオ ボタンを参照するように「prev」変数を更新する前に、以前にチェックされたラジオ ボタン (存在する場合) の値をログに記録します。

代替アプローチ

  • 直接イベント委任の代わりにイベント バブリングを使用できます。このアプローチでは、イベント リスナーがフォーム要素に追加され、ラジオ ボタンがクリックされるとイベントがフォームにバブルアップされます。ただし、このアプローチはパフォーマンスに影響を与える可能性があります。
  • クリック イベントは、onChange のフォールバックとして使用できます。クリック イベントは、ラジオ ボタンがオンかオフかに関係なくトリガーされますが、ラジオ ボタン グループの状態のコンテキストが欠落しています。

以上がブラウザ間でラジオ ボタン グループの変更を確実に追跡する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!