JavaScript でラジオ ボタンのオンとオフの両方の状態を追跡するにはどうすればよいですか?

ラジオ ボタンの OnChange ハンドラーの改善

この記事では、ラジオ ボタン グループの onchange イベントを効果的に処理するという課題について検討します。デフォルトでは、JavaScript のラジオ ボタンの onchange イベントは、ボタンがチェックされていない場合ではなく、チェックされている場合にのみ発生します。

問題を理解する

複数のラジオがあるシナリオを考えてみましょう。フォーム内で同じ名前のボタン。フォームが送信されるとき、ラジオ ボタンは 1 つだけ選択されることが想定されており、その値はフォーム データとともに送信されます。ただし、onchange イベントは、選択されているボタンから別のボタンへの遷移をキャプチャするメカニズムを提供しません。

この動作は、新しくチェックされたボタンと以前にチェックされたボタンの両方を追跡する必要がある状況で問題を引き起こす可能性があります。 。たとえば、動的フォームでは、ラジオ ボタンの選択の変更に基づいて特定のアクションを実行したり、UI を更新したりすることができます。

イベント リスナーを使用した回避策

回避策の 1 つは、各ラジオ ボタンの変更イベントにアタッチされたイベント リスナーを利用することです。各ボタンの変更イベントを個別にリッスンすることで、以前にチェックしたボタンを追跡できます。

<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>

このコードでは、ラジオ ボタンをループし、各ラジオ ボタンに変更リスナーをアタッチし、変数 prev を定義して、以前にチェックしたボタンを保存します。ボタンの変更イベントがトリガーされると、以前にチェックしたボタンの値 (存在する場合) を取得し、以前と新しくチェックしたボタンの値の両方をログに記録し、新しくチェックしたボタンを参照するように prev を更新します。

これこのアプローチにより、ラジオ ボタンのオンとオフの両方の状態をキャプチャできるようになり、より完全なイベント処理メカニズムが提供されます。

以上がJavaScript でラジオ ボタンのオンとオフの両方の状態を追跡するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。