ラジオ ボタンの選択解除イベントをキャプチャする方法: onChange の制限を超えて

ラジオ ボタンの混乱: onChange の制限の解決

ラジオ ボタンは、単一の選択を処理する便利な方法を提供しますが、その完全な状態変更をキャプチャすることは困難になる可能性があります。挑戦的。同じ名前のラジオ ボタンが複数あり、選択と選択解除の両方を追跡する必要があるシナリオを考えてみましょう。

onChange イベントは明らかな選択のように見えますが、ラジオ ボタンが選択解除されている場合には起動されません。これにより、チェックされたイベントとチェックされていないイベントの両方をキャプチャする必要があるシナリオで問題が発生します。

回避策

回避策の 1 つは、addEventListener メソッドを利用し、変更イベント ハンドラーをアタッチすることです。各ラジオボタンにイベント ハンドラー内では、変数を使用して、以前にチェックしたラジオ ボタン (prev) への参照を維持できます。

ラジオ ボタンがチェックされると、前の値 (prev.value) と現在の値の両方が記録されます。値 (this.value)。これにより、チェックされたイベントとチェックされていないイベントの両方をキャプチャできるようになります。

<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)
    });
}

付随する HTML コード:

<code class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1" />
  <input type="radio" name="myRadios"  value="2" />
</form></code>

この回避策により、すべてのラジオの onChange イベントをキャプチャする一般化されたソリューションが得られます。ボタン (選択解除イベントを含む)。

以上がラジオ ボタンの選択解除イベントをキャプチャする方法: onChange の制限を超えての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。