JavaScript でラジオ ボタンのチェック イベントとチェック解除イベントの両方を処理する方法は?

ラジオ ボタンの OnChange イベント: チェック イベントとチェック解除イベントの処理

ラジオ ボタンを使用する場合、チェック イベントとチェック解除イベントの両方を効果的に処理することが重要です。標準の onChange イベントは、ラジオ ボタンが選択された場合にのみトリガーされるため、これには対応していません。これにより、前の選択がいつ選択解除されたかを識別する際にギャップが残ります。

OnChange イベントの回避策:

次のコード スニペットを検討してください:

<code class="js">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>

このスクリプトは、目的の目的を達成します。動作:

1. すべてのラジオ ボタンを反復します。
2. ラジオ ボタンごとに、イベント リスナーが onChange イベントに追加されます。
3. ラジオ ボタンがチェックされている場合、以前にチェックされたラジオ ボタン (存在する場合) の値がログに記録され、現在チェックされているラジオ ボタンへの参照が更新されます。

このソリューションは、チェック イベントとチェック解除イベントの両方をキャプチャし、次のことを可能にします。以前と現在チェックされているラジオ ボタンの値の両方にアクセスします。

OnClick イベントの制限:

onClick イベントは、ブラウザ間でより一貫性がありますが、未チェック イベントのキャプチャの問題にはまだ対処していません。 。したがって、特定のユースケースでは考慮されるかもしれませんが、ラジオ ボタンでチェック イベントとチェック解除イベントの両方を処理するための完全なソリューションではありません。

以上がJavaScript でラジオ ボタンのチェック イベントとチェック解除イベントの両方を処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。