OnChange イベントで選択解除されたラジオ ボタンの値を追跡する方法

ラジオ ボタン値の OnChange イベントの回避策

同じ名前のラジオ ボタンを使用する場合、onChange イベントがラジオボタンが選択解除されている場合はトリガーされません。これにより、以前に選択した値を追跡することが困難になる可能性があります。

解決策

これを克服するには、次の手法を組み合わせて使用​​できます。

1. ラジオ ボタンの反復: JavaScript を使用して同じ名前のすべてのラジオ ボタンを反復します。
2. 変更のイベント リスナー: 変更イベントのイベント リスナーを追加します。
3. Previous Radio: イベント リスナーの外側で変数 prev を初期化し、最初に null 値を格納します。

4. 内イベント リスナー: イベント リスナー内で、次のアクションが発生します:

   • prev 値がある場合は、その値をコンソールに記録します。
   • prev 値を次のように更新します。現在のラジオ ボタン。
   • 現在のラジオ ボタンの値をコンソールに記録します。

コード例:

<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 class="html"><form name="myForm">
  <input type="radio" name="myRadios"  value="1">
  <input type="radio" name="myRadios"  value="2">
</form></code>

追加メモ:

• このアプローチでは、以前に選択されたラジオ ボタンの値と新しく選択されたラジオ ボタンの値。
• この概念は、ラジオ ボタンの複数のグループを処理するように拡張できます。

以上がOnChange イベントで選択解除されたラジオ ボタンの値を追跡する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。