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

ラジオ ボタン グループの 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 サイトの他の関連記事を参照してください。